Creating items that expand when clicked

The FactBranch app is often displayed in a sidebar and so space is limited. But what if you’d like to display lots of data? The collapsible item is our solution to this problem.

This makes organizing the view easy and is perfect to display a list of most recent orders or all transactions of your customers.

Adapting the Microsoft SQL Server query

Because the collapsible is a single item that displays multiple result fields at once, you first have to adapt your SQL Server query to return the fields as a single array of JSON objects using FOR JSON. If you only want to display one collapsible, the array should only contain a single object. Here is the code to generate JSON in an SQL Server query:

select * from orders where email=%(email)s
for json auto

The preview will show the raw JSON code.

Adding the collapsible in the Designer

Once your query returns a JSON object or array, continue to the FactBranch Designer and change the type of the item that contains the JSON to “HTML”.

Now we need to define three things: Which fields to display in the preview, which fields to display in the expanded view and what their respective labels should be and which field to display as the title.

We do this by using a custom jinja2-filter called `collapsible`. But because we have to tell that filter a lot of things at the same time, we’ll define the preview and expanded fields as lists first and then call the filter with these two lists.

Here is the code for everything:

{% set preview = [
  'total',
  'summary',
  'status'
] -%}

{% set labels = [
  'order_id:Order ID',
  'total:Total',
  'status:Status',
  'item1:Item 1',
  'item2:Item 2',
  'item3:Item 3'
] -%}

<h3>Recent orders</h3>

{{ value|collapsible('order_id', preview, labels) }}

Let’s walk through that code: First we define the list of fields to use in the preview. This is simply an array of strings. Use the field names from your SQL query.

Then we define the fields to show when an item is expanded. Also use the field names from your SQL query here. To define a custom label (because the raw field names aren’t that nice) use this syntax with a colon:

'field_name:Custom label to display'

Finally we call the collapsible with the field to use as the title.

In the preview panel the results of that code will look like this. All items are expanded in the preview panel to show you everything at the same time. Don’t worry, in the app they will be collapsed by default and will expand when clicked.

Combining it with HTML

Because this is just a filter you use in your HTML-templates, it’s easy to combine these collapse items with other HTML. To add a heading above the list of collapsibles, simply define an H3-tag in your HTML like this:

<h3>Recent orders</h3>

If you need help …

… do reach out to support@factbranch.com. This is an advanced feature and we’re happy to help you set it up or hear what else you need.