Indenting Columns – Page | Business Central

Sometimes we have the need to give a better visual effect on our pages, and if we are speaking of a schema’s visualizations, like from XMLs or JSONs, even if we’re speaking only as a read mode, Indentation fits wonderful for these.

Let’s see here how we can do it, by using a simple example.

I’ve mapped an API response, in JSON, by code, into a table that is used as a source table of a subpage. For this table, I’ll highlight two columns that are the most important for this case scenario, “API Key Name” and “Current Node” fields.

Let’s see how the above display has been managed on the code…

Page repeater and the fields we pretend to show.

During my schema’s map, I got each key name of the JSON schema and its current node, ending with the flat representation on the page. It is already informative, since the “Current Node” field, already gives you a clue of how the schema is…

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  }
]

Note: The above example is from https://jsonplaceholder.typicode.com/, a fake API that can be used for testing purposes.

But we want better… πŸ˜€

We want that the column API Key Name looks more what we can see on the JSON schema representation, with the indentation between nodes.

For that we’ll need to add two new lines to the Template Lines page, that’ll set two properties for the page repeater group and are they: IndentationColumn and IndentationControls.

The first one (IndentationColumn) will set which column will be used to look for the indentation level on that row. On the second one (IndentationControls) will be set in which columns will happen the indentation.

Let’s see the code and the result…

Usage of IndentationColumn and IndentationControls – Properties of Page Repeater Group
Comparison between schema indentation and what we have on the Business Central side.

And that’s it, the secret pass through the “Current Node” field correctly filled, afterward, the page will do everything on its own.

In a conclusion, if for some reason, you need to store, on Business Central, the schemas you’re using on your developments, like for setup, read purposes, etc., you can change your pages in a way to have a better display of how it looks like the schemas.

I hope that helped. Stay safe!

One thought on “Indenting Columns – Page | Business Central

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
%d bloggers like this: