webOS List Formatters

Chad Scates

Here at Cardinal Peak, we’ve been doing quite a bit of development on webOS, Palm’s new operating system for smartphones. WebOS is based on Linux, and it relies heavily on web standards like HTML, CSS, and JavaScript. It’s a great programming environment, but since it’s also rather new, there’s a lot of tribal knowledge still to be built up around how to optimally develop for it. So this is the first of an occasional series where we will look at issues that arise when developing webOS applications.

A list formatter is a very powerful feature of webOS. Basically a formatter is a function that is applied to a property name, and it formats each list element for display to the user. Although it’s a great feature, I did not find it to be documented very well. Here’s a quick tutorial on how to use list formatters.

Let’s start in the HTML. In your scene, add a Mojo element for a List. The following line creates a simple list named ExampleList:

<div x-mojo-element='List' id='ExampleList'></div>

Let’s also create a row template for our list and save the file to our views folder (views/ExampleList/rowTemplate.html):


The #(-myData} object is what we are going to replace in the HTML. The HTML could have been much more complex and the object itself could have been embedded in the middle of the HTML. This object just represents the portion of the HTML code which will be replaced by the formatter code.

In the JavaScript you reference your formatter as part of the attributes to the setupWidget call.

listAttributes = {
itemTemplate: 'example-list/rowTemplate',
formatters:{myData: this.setMyData.bind(this)}
this.controller.setupWidget('ExampleList', listAttributes, this.model);

The only required element of the listAttributes is the itemTemplate. For our example we are adding the optional formatters and to the myData key we are instructing it to call the setMyData function. The key name that you use here must match the property name in the HTML.

The last piece to the puzzle is the formatter function itself:

setMyData: function(propertyValue, model) {
if(model.isHappy) {
model.myData = "Feeling Happy";
else {
model.myData = "Feeling Sad";

Now, when the myData field in the model is modified, the HTML will replace the #{-myData} property name with one of the strings “Feeling Happy” or “Feeling Sad.” In this case the HTML string was simple text to display. The string could have also been any properly validated HTML string.

model.myData = '<img src="images/happy.jpg" />';

This combination of list templates and list formatters should allow you to come up with both complex and dynamic lists in webOS.

Find code for this here.

Categories: Chad, WebOS

Cardinal Peak
Learn more about our Audio & Video capabilities.

Dive deeper into our IoT portfolio

Take a look at the clients we have helped.

We’re always looking for top talent, check out our current openings. 

Contact Us

Please fill out the contact form below and our engineering services team will be in touch soon.

We rely on Cardinal Peak for their ability to bolster our patent licensing efforts with in-depth technical guidance. They have deep expertise and they’re easy to work with.
Diego deGarrido Sr. Manager, LSI
Cardinal Peak has a strong technology portfolio that has complemented our own expertise well. They are communicative, drive toward results quickly, and understand the appropriate level of documentation it takes to effectively convey their work. In…
Jason Damori Director of Engineering, Biamp Systems
We asked Cardinal Peak to take ownership for an important subsystem, and they completed a very high quality deliverable on time.
Matt Cowan Chief Scientific Officer, RealD
Cardinal Peak’s personnel worked side-by-side with our own engineers and engineers from other companies on several of our key projects. The Cardinal Peak staff has consistently provided a level of professionalism and technical expertise that we…
Sherisse Hawkins VP Software Development, Time Warner Cable
Cardinal Peak was a natural choice for us. They were able to develop a high-quality product, based in part on open source, and in part on intellectual property they had already developed, all for a very effective price.
Bruce Webber VP Engineering, VBrick
We completely trust Cardinal Peak to advise us on technology strategy, as well as to implement it. They are a dependable partner that ultimately makes us more competitive in the marketplace.
Brian Brown President and CEO, Decatur Electronics
The Cardinal Peak team started quickly and delivered high-quality results, and they worked really well with our own engineering team.
Charles Corbalis VP Engineering, RGB Networks
We found Cardinal Peak’s team to be very knowledgeable about embedded video delivery systems. Their ability to deliver working solutions on time—combined with excellent project management skills—helped bring success not only to the product…
Ralph Schmitt VP, Product Marketing and Engineering, Kustom Signals
Cardinal Peak has provided deep technical insights, and they’ve allowed us to complete some really hard projects quickly. We are big fans of their team.
Scott Garlington VP Engineering, xG Technology
We’ve used Cardinal Peak on several projects. They have a very capable engineering team. They’re a great resource.
Greg Read Senior Program Manager, Symmetricom
Cardinal Peak has proven to be a trusted and flexible partner who has helped Harmonic to deliver reliably on our commitments to our own customers. The team at Cardinal Peak was responsive to our needs and delivered high quality results.
Alex Derecho VP Professional Services, Harmonic
Yonder Music was an excellent collaboration with Cardinal Peak. Combining our experience with the music industry and target music market, with Cardinal Peak’s technical expertise, the product has made the mobile experience of Yonder as powerful as…
Adam Kidron founder and CEO, Yonder Music
The Cardinal Peak team played an invaluable role in helping us get our first Internet of Things product to market quickly. They were up to speed in no time and provided all of the technical expertise we lacked. They interfaced seamlessly with our i…
Kevin Leadford Vice President of Innovation, Acuity Brands Lighting
We asked Cardinal Peak to help us address a number of open items related to programming our systems in production. Their engineers have a wealth of experience in IoT and embedded fields, and they helped us quickly and diligently. I’d definitely…
Ryan Margoles Founder and CTO, notion