Blog

One of the most useful ways to present complex information and multiple choices to a mobile app user has been the touch-enabled scrolling table. We all use these tables every day on our smartphones when reviewing our email inbox, Twitter feed, and similar lists.

When building custom mobile apps, the scrolling table is often essential for showing results of data queries and responses from REST APIs. The earliest mobile apps kept the presentation to the user very simple – each row would typically show one or two lines of text and maybe a picture.

Now that mobile apps are working with ever more complex data sources, users need to see more information packed into the scrolling table, but it has to be presented in a visually appealing way so that the user can make sense of all the information. This is exactly what you can achieve with the new Custom Tables feature from ViziApps.

Scroll Tables

Designing a Custom Table

The design process for Custom Tables follows the ViziApps no-coding approach with free-form graphical design of the mobile app page layout.

The ViziApps developer first creates a design pattern that will be used by the table. This is a fast and familiar process which is just like building a new page. One customization that easily adds impact is to include a background image such as a color gradient. Something as simple as changing the color palette can inform the user at a glance that they are looking at a different data set.

You can mix any number of images, and size them and place them wherever you like within the design pattern. The image contents can be preset (as when using a background image), or determined dynamically and individually for every row based on the results of a data query. Text labels can also be placed anywhere within the design pattern, and set to any font, color, and size that you like. Text labels can also have fixed content, or dynamic content for every row based on a data query.

By adding fields to the design pattern, it’s possible to build up practically any size, complexity, and style of table rows that you can imagine. When the design pattern is ready, you can define a new table by specifying your design pattern instead of defining table row fields, and the design pattern can be re-used to define multiple tables.

The excitement happens when you hook up your new table design pattern to a data source such as a Google Spreadsheet, Intuit QuickBase, Salesforce.com, or SQL database. With ViziApps’ no-coding approach to data management, you will quickly assign your data source columns to fields in the custom table, and start enjoying table design without limits!

Subcategories