In today’s world, it’s not enough just to have web applications with business use cases implemented—your app needs a great UI as well. A successful UI focuses on helping the user accomplish a given task in a simple and efficient manner. An attractive and intuitive look and feel is undeniably at the core of an effective UI.
Your business needs are also 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 smartphones. Displaying your 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 you develop an application using Rollbase, the platform is smart enough to render data differently on different devices. Using Rollbase, you can create a user interface component called a Card to display Rollbase records without writing a single line of code. In this blog, you will learn how to create cards with Rollbase for your user interface requirements.
Cards are widgets that are used to display object record data based on your business needs. You can add a drill down link to a card to view record details page.
Rollbase supports two types of cards:
A card can only be used to replace a record list page where we display object records in a tabular format. If there are multiple objects in your application, you have to create a different card for each list view page. You can create as many cards as you want, and then a preferred card per device.
As an adaptive design, Rollbase renders a default card in tablets and smartphones for a 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 you can create cards for desktop devices and save them. Follow the steps in the next section to learn how to create cards in Rollbase.
Only administrators can create cards, assign them to appropriate devices, and save them from Live Preview. Follow these steps to create a new card:
Go to Live Preview from the Rollbase menu. This is in the Administration section if you use the Modern – Vertical Menus UI blueprint.
Launch the card editor from the Card Templates section. You might find more than one list if you have more than one section in the same page and each section contains a different list view.
Choose a design from the list to see a preview in the right pane. Designs are predesigned cards; you 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 you decide which design to use, select it and click Next. If none of our card designs meet your requirements, you can create a card using our layouts—just select a layout and add fields from editor.
The screens below show sample horizontal and vertical card designs:
Map Rollbase fields to your card. If you would like to remove an item from the card, map to the Ignore Field option. Once you map all fields, click Create a New Card. The screen below shows the interface for mapping fields:
Rollbase provides a WYSIWYG card editor, where you can change your card layout and/or styles. In addition to the card editor, Rollbase has built-in tools that allow you to add some on-the-fly components to cards via simple mapping. You 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:
These built-in tools include the following:
The screen below shows a card created by using the built-in tools:
Once you complete editing your card, you can select Use this card for to select devices on which to use your card. Name your card and click Save.
The next step is to select your card for different devices by selecting the device icon from Live Preview. You 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:
In this blog you learned how to create Cards without writing a single line of code. The Rollbase platform gives you lots of flexibility to render your object data with nice UI components. If you'd like to give it a try for yourself, sign up to give Rollbase a try.
Copyright © 2018 Progress Software Corporation and/or its subsidiaries or affiliates.
All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.