Link from One Dashboard to Another in Cards - HREF property

[Monique Tickle]

In cards we can link to other dashboard pages and dynamically update the context of the linked page through the “href” property of the Text component.

Basic HREF Link
The href can be linked simply to a page through the page route. Navigate to the application, and in the screens tab copy the route of the desired page. Surround that simple route with a forward slash on either side, and put this into the Text’s href property.

For example, the href would be the below if the page route is “profit-and-loss”:

• /profit-and-loss/

Now clicking on the text component on the frontend will take you to this page. Note that it does not work in the card editor.

Dynamic HREF Link
The href can be linked in a more dynamic way through the property editor in order to update the context of the destination page based on the current card. Click on the calculator in the href property to open the property editor.

The page route is still required for a dynamic route, so include the page route wrapped in forward slashes and double quotes. It would then be followed by a question mark, which marks querying into the detail of the context- adding dimensions as parameters into the browser URL.

At this point the href will appear as below:

• “/page-name/?”

From there it must be followed with the ID of the dimension which is to be dynamically updated. This can be found by opening the dimension in the model, and taking the very last portion of the browser url - this is the distinct dimension ID. See the bold portion of below example:

• https://go.modlr.co/model/example/12342a2k4j58386573fbh5/dimension/61dabb43725cb7bc4383ec2d4f9884bf

To finish the portion in double quotes, add an “=”. This will determine what the identified dimension should be set to.

The href will appear as below once the ID is taken (using above example ID):

• “/page-name/?61dabb43725cb7bc4383ec2d4f9884bf=”

Now the dynamic element can be added by concatenating with an ampersand (&). This could be anything, such as an ELEMENT(), VARIABLE() or LINK() wrapped in a URLENCODE() function. Typically it would be an ELEMENT(), but the value of what is input MUST be an element that exists in the identified dimension for it to function correctly. The structure should end up appearing as below:

• “/page-name/?61dabb43725cb7bc4383ec2d4f9884bf=”&URLENCODE(ELEMENT(”Dimension Name”))

This will open the new page whilst setting the value of the identified dimension to the ELEMENT() value.

Dynamic HREF Link - Multiple Dimensions
The above is able to be done for multiple dimensions at once, by concatenating with an ampersand (&) within the quoted portions. A href referencing multiple dimensions may appear like below:

• “/page-name/?dimensionID=”&URLENCODE(ELEMENT(”Dimension Name”))&”&dimensionID2=”&URLENCODE(ELEMENT(”Dimension Name 2”))

 

[Ben Hill]

Just to add to this, when a page loads it follows this approach -

1. Take any URL parameters first
2. Use local storage (what the user was last looking at)
3. Any "Set default" instructions on a given set
4. The settings the given dashboard / card was last saved on
5. [This one shouldn't happen but if a card hasn't been configured with a context] The final fallback is the first available item in the given dimension set.