Enhance Your UI with Card Rendering in Rollbase

Introduction

In today’s world, it’s not enough just to have web applications with business use cases implemented, but it should have a great UI as well. A great UI is all about helping the user accomplish a given task in a simple and efficient manner. The look and feel is undeniably at the core of a great UI. End user business needs are not limited to desktop devices. Developers may want to design applications once and expect them to serve their end users’ needs on all types of devices, including tablets and smart phones. Displaying record data in tabular format (grid) is not going to be effective in all devices and form factors. Moreover, end user operations on mobile devices should be limited to simple tasks. So rendering advanced widgets to display data on mobile devices will not make for a great user experience. When user develop an application using Rollbase, the platform is smart enough to render data differently on different devices. Using Rollbase, user can create a user interface component called a Card to display Rollbase records without writing a single line of code. In this blog, we will learn how to create cards with Rollbase for user interface requirements.

Cards

Cards are widgets that are used to display object record data based on user business needs. Card allows user to add a drill down link which helps them view record details page.

Types of Cards

Rollbase supports two types of cards:

  • vertical (default), which are preferred for mobile devices.
  • Horizontal cards, which have a fixed height and width suitable for desktop and large screen devices. It can be used in tablets also.

Card can be used only to replace record list page where we display object records in a tabular format. If there are multiple objects in application, user have to create a different card for each list view page. Users are not limited to number of cards per list view, can create as many as but need to save preferred card per device.

Adaptive rendering in Mobile Devices

As an adaptive design, Rollbase renders a default card in tablets and smart phones for record list view page. Default cards include the record name with a drill down icon through which we can view record details. Rollbase renders a grid by default on desktop devices, but user can create cards for desktop devices and save them. Follow the steps in the next section to learn how to create cards in Rollbase.

How to create cards

Only administrators can create cards, assign them to appropriate devices, and save them from Live Preview. Follow these steps to create a new card:

1) Launching Live Preview:

Go to Live Preview from the Rollbase menu. This is in the Administration section if you use the Modern – Vertical Menus UI blueprint.

2) Launching Card Editor:

Launch the card editor from the Card Templates section. There might be more than one list if the page have more than one section and each section contains a different object list view.

3) Select design of card:

Choose a design from the list to see a preview in the right pane. Designs are pre-designed cards; User map Rollbase fields to create a card from a design. You can switch between different devices and see a preview for each type of device. The available designs and layouts are different for vertical and horizontal cards. Once designs are finalized to use, select it and click Next. If none of our card designs meet your requirements, you can create a card using our layouts; select a layout and add fields from editor. The screens below show sample horizontal and vertical card designs.

Horizontal Design:

Vertical Design:

4) Map Rollbase Object fields to Card:

Map Rollbase fields to selected design card. If you would like to remove an item from the card, map to the Ignore Field option. Once all fields are mapped, click Create a New Card. The screen below shows the interface for mapping fields:

5) Design Card from Editor:

Rollbase provides a WYSIWYG card editor, where user can change card layout and/or styles. In addition to the card editor, Rollbase have some built-in tools that allow user to add some on-the-fly components to cards via simple mapping. User can add more field values or labels to cards by dragging and dropping the field value or label to the current cursor position from the Values or Labels sections.

The screen below shows the built-in tools:

Built-in Card Tools

This sections explains built-in tools available in Rollbase which is very handy for end user to add some nice components to Card.

  1. Add Object View Link – This tool adds a drill down icon to selected card; users can click this icon to navigate to the record view page.
  2. Add Rating – This tool lets user to add a rating component to selected card. User can map integer, decimal, or formula fields that have a return type of integer or decimal to a rating component. Rollbase renders a rating based on the field value, which can have a range of values from 1 to 10. If user map a decimal field, and the precision value of decimal fields is greater than or equal to 0.5, Rollbase renders a half rating.
  3. Add Percentage Bar – This tool lets user add a percentage bar to selected card. For instance, user could use this widget to display a student’s grade percentage. This widget also accepts integer, decimal, and formula fields that have a return type of integer or decimal. Accepted values are from 1 – 100.
  4. Add Color Side Bar – This tool lets user add a conditional color side bar to selected card based on a Boolean value. It accepts only Boolean values, so user can choose any checkbox field or formula field that have a return type of Boolean. User can select a color for a true value and a color for a false value.
  5. Edit Card Dimension – This tool lets user adjust selected card’s width and height. Different widths can be provided for desktop and tablet devices. This tool is only available for horizontal cards.
  6. Add Text Limit – This tool lets user limit long text inside the card, for example, if user have a long description in one field and want to show only the first three lines of text. User can choose either number of lines to see or the number of characters to see. Based on the device and the size of selected card, Rollbase automatically trims the text and adds an ellipsis to it.

The screen below shows a card created by using the built-in tools:

Once user complete editing selected card, can select Use this card for to select devices on which to use selected card. Name the card and click Save.

6) Saving Card per device:

The next step is to select your card for different devices by selecting the device icon from Live Preview. User can attach only one card per device type for the list view, so if you have more than one card per device, you should select them and save it from Live Preview.

The screen below highlights device selection and the save button:

Now you will see a card rendered instead of the default grid. You can always switch to the grid view by clicking Switch to Grid on the toolbar.

The following screen shows a card with a horizontal design on a desktop and highlights the Switch to Grid button:


Conclusion

To conclude this article, we did lots of improvement on UI to make sure platform serve needs of designing application once and use it across different devices with out putting much effort. Hope, you enjoyed reading this article. If you’d like to give it a try for yourself, sign up to give Rollbase a try.

Comments are closed.