Live Monitor Setup

Live Monitor tabs enable you to surface API requests, webhooks or any JSON payload along side a UI. A great use case for a live monitor tab could be to show the orchestration of various requests occurring in a sequence.

Any Resource Library element can be surfaced on a Live Monitor tab. So, to get started, navigate to the Resource Library and define the API request or JSON payload you wish to surface.

Then, on a Live Monitor Tab, the Construct experience will ask you to identify which Resource Library elements you wish to surface. Now, whenever any of these enabled resources get triggered, they will get surfaced alongside the UI on this tab.

Not seeing the resource getting surfaced? Ensure that it has been toggled on and that its defined condition has been met.

Example

In this example, we will define 2 resource library requests and have them get triggered and surfaced on a live monitor tab.

Setting up the Resources

For the sake of this example, lets assume we want to surface 2 sequential API calls on a single live monitor tab. The first request will be to issue a new card, and the second request will be to activate the card.

Define the first resource library request and do not provide it with a Condition (we will use a clickable block to manually trigger this first request)

For the second request, let's define its condition to be when the value at path issueCard exists. This condition will ensure that once the Issue Card request fires, the Activate Card will fire immediately after it.

Note that we are able to mock these resource library requests via the Mock Request toggle. For mocked requests, you will need to provide a payload for the response.

Enabling Resources

Now that our requests are defined, we will see these as options that can be surfaced on any live monitor tab in this template. Go ahead and enable both of these requests to monitor.

Triggering The Resources

Flip over to the designer and select a Gallery UI. Ensure that your UI has a Clickable Container block. Select this block and assign its action to Trigger A Request, and select the Issue Card request.

And now we are all set 🎉. When a user clicks on that element, it will trigger the Issue Card request, and then subsequently the Activate Card request, and both of these requests will be surfaced on this tab.