Creating items that expand when clicked

Give a quick overview - and display large amounts of data when needed.

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 MySQL query

Because the collapsible is a single item that displays multiple result fields at once, you first have to adapt your MySQL query to return the fields as a single JSON object. Here is the code to generate a JSON object in a MySQL query:

select json_object(
  'order_id', order_id,
  'total', total,
  'summary', summary,
  'status', status,
  'item1', item1,
  'item2', item2,
  'item3', item3
) as recent_orders from transaction where email=%(email)s

To display multiple collapsibles like in the example above, you need to return a JSON array of objects in your MySQL query like this (notice the added json_arrayagg function):

select json_arrayagg(json_object(
  'order_id', order_id,
  'total', total,
  'summary', summary,
  'status', status,
  'item1', item1,
  'item2', item2,
  'item3', item3
)) as recent_orders from transaction where email=%(email)s

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.

New features, customer support tips, CRM insights

Don't miss our newsletter. We write about how to provide context to sales and support teams, about new features in FactBranch and about best-practices in customer relationship management.

By signing up you agree to our Privacy Policy.