Skip to main content

Section 1: Configuring Components

Configure a multiselect dropdown from unique values in a column​

The choices displayed in a multi-select dropdown should be an array of values. This array of values can be obtained by finding the unique values in a table column.  This video shows how to sort a table on a specified column, get the unique values in the column and use these unique values in a multiselect dropdown.

Configure input components: Checkboxes and sliders​

Sliders work well in cases where app users are required to choose between a limited range of numeric options.

A checkbox can set a value to true or false. The video below shows how to configure a checkbox. Combining the checkbox with a filtering workflow, allows the user to hide or show specific content.

Adding tabs to a canvas​

The canvas component has a Tab Labels property that contains a list of all the tabs on the canvas. Additional tabs can be added by to the canvas by modifying the list.

Configure common charts: Data grids, bar chart, line charts and heatmaps​

Data grids​

A data grid can be used to display tabular data. Data grids are very quick to configure and allows easy inspection of data.

Bar charts​

Bar charts are used to compare categorical data. It is our most popular chart and have a wide range of customization options.

Line charts​

Line charts are ideal for showing trends over time.

The line chart configured in the previous step does not make sense. It contains the totals, as well as the breakdown of the medals tally for various countries over different years.

You can build a filter workflow to remove the rows with Total from the data source. Remember to change the data source for your line chart once the workflow has been built.

Heatmaps​

Heatmaps allow comparison of numeric values over two categorical dimensions.

The heatmap, like the bar chart has various aggregation options.  In the example above, the average was used.  For granular control over aggregation, use a workflow to aggregate data. This video shows how to use a workflow to aggregate and sort the data for the heatmap.

Instead of taking the average over three years, we can use the slider to choose which year to show data for.  Additionally, the subtitle of the chart can dynamically show the selected year.

Configuring less frequently used charts: Tornado charts​

The tornado chart has limited configuration options, but is useful in specific applications.  Use this code snippet to set up the series for a tornado chart. The series configuration contains an array with four series, Total, Gold, Silver and Bronze. The alignLeft key determines whether a series is displayed on the left-hand-side or right-hand-side of the graph.  The subFilterData key filters the data in the source data table.

This video shows how to configure a Tornado chart using the series configuration in the code snippet.

[
    {
      "name": "Total",
      "color": "#00695c",
      "xDataKey": "Country",
      "yDataKey": "Count",
      "alignLeft": true,
      "subFilterData": {
        "filter": {
          "key": "Medal",
          "value": "Total"
            }
        }
    },
    {
      "name": "Bronze",
      "color": "#ad664c",
      "xDataKey": "Country",
      "yDataKey": "Count",
      "alignLeft": false,
      "subFilterData": {
        "filter": {
          "key": "Medal",
          "value": "Bronze"
            }
        }
    },
    {
      "name": "Silver",
      "color": "#9e9e9e",
      "xDataKey": "Country",
      "yDataKey": "Count",
      "alignLeft": false,
      "subFilterData": {
        "filter": {
          "key": "Medal",
          "value": "Silver"
            }
        }
    },
    {
      "name": "Gold",
      "color": "#ffd900",
      "xDataKey": "Country",
      "yDataKey": "Count",
      "alignLeft": false,
      "subFilterData": {
        "filter": {
          "key": "Medal",
          "value": "Gold"
            }
        }
    }
]

Grid layout to resize automatically​

App users can use different devices to view apps.  It is important to keep in mind that the user of your app may not be using a device with the same screen resolution that you are using to build.  The grid layout component can be configured to resize depending on the content of different rows and columns. The 'auto' keyword is particularly useful. Rows and columns that are set to 'auto' will resize to have the smallest dimensions possible to fit around the content they contain.

This video shows to set up a grid to minimize the space occupied by a button and maximize the space occupied by a bar chart.

Configuring view switchers (and moving components)​

View switchers are versatile components that control what app users see on different sections of the app user interface.  You may only realize that you want to switch out a part the view after you have built it.  In this case, move the components to a temporary location, configure the view switcher and move the component back.  This video shows you how.

Using scrollable containers​

Scrollable containers make it possible for users with small screens to have a good app experience.  When a view contains multiple rows of rows of graphs, it is a good idea to place these in a scrollable container. You may only realize that more rows are required once you have already configured a few graphs. Use Move selected to temporarily move content that needs to be placed in a scrollable container, and move it back once the scrollable container has been configured.

When placing a grid layout component inside a scrollable container, play around with the grow property to get different auto-resizing behavior.