Card Class Reference

Essential Card.init() Card.add(title, onclick, style) Card.addLabel(label, value, onclick, style) Card.addButton(title, onclick, style) Card.addImage(base64, label, onclick, style) Card.show() Section Header & Columns Card.addTitle(title, subtitle) Card.addHeader(title) Card.setColumns(count)

Overview

This is a new class to add card items in a screen with a multi column layout. It is used for home and intermediate navigation screen, where the amount of items is limited. All methods in this class are static.

The default number of cards per row is 2. This can be changed dynamically by calling Card.setColumns() method, allowing complex layout on the same screen.

First make a call to Card.init(), then multiple calls to Card.add() followed by a final call to Card.show().

Card Sample App on Github

This class cannot be used in conjonction with the List class on the same screen. You use either List or Card method calls for one screen, but you cannot mix both.

The Card class is supported by Upvise mobile app version 5.9 or higher. If an old Upvise app if installed, the Card class will use the underlying List class automatically, allowing to maintain one unique code base.

Card.init()

This must be the first call to initialize the Card class before any other methods are called.

Card.addTitle(title, subtitle)

Adds a centered title and subtitle to the screen.

Card.addTitle("Contacts", "34,456 records");

Card.addHeader(label)

Adds a new section header named label. label is an optional string and may be null.

Card.addHeader("Manager Dashboard");

Card.setColumns(count)

Defines the number of card per row. It forces a section break. count can be 1,2, 3 or 4. During Card.init(), the default card count per row is set to 2. Call this method only if you want ot mix different number of cards per row in the same screen.>/p> 

Card.setColumns(3)

Card.add(label, onclick, style)

Adds a new card on the screen. A card has a white background and a label. You can define an optional colored icon image and/or a counter value in the style parameter. The onclick param is an optional callback function.

Format of the style string is "img:[icon];count:[a-Z];color:[aColor].
Valid color values are blue, green, orange, red, teal, brown, purple, yellow or any HTML hexa color code string. 

Card.add("Support", "showSupport()", "img:support");
Card.add("Contacts", "showContactList()", "img:contact;count:543;color:blue");
Card.add("Companies", "showCompanyList()", "img:company;color:orange");

Card.addButton(label, onclick, style)

Adds a new button on the screen. A button has a background color, an optional label and/or an icon image;

The onclick param is an optional callback function

Card.addButton("Lookup", "lookup()", "color:blue;img:search");

Card.show()

This must be the last call to render the screen.

        Card.init();
        Card.add("Hello");
        Card.add("World");
        Card.show();