After logging in to “My Tynacoon” at the top right of the homepage, most of what you will see on your dashboard is remote dynamic data. There’s static text as well, e.g., headlines and labels, and the navigations originate from the portal’s content structure, not from a remote service.

However, the contents of the white boxes displaying the core data of items like individual tickets, events, or quotes is fetched from the remote PisaSales CRM instance the “Tynacoon” portal application is connected to. This data is dynamic insofar as it relates to the portal user, such as their own tickets, etc. Which of these items are to be displayed is the result of a filtering and ordering mechanism based on customizable criteria. This mechanism is anchored in the widgets that were placed on the page to present the desired pieces of data. As an editor, you can provide these criteria.

So let’s first enter the Interface Builder’s “Edit” mode, and take a look at the widgets displaying the core data of a couple of items, the latest support tickets of the logged-in user, for example. Everything relevant is part of a “Data Group” widget here, including even the headline. Using this widget as a container for presenting a complete set of items allows you to duplicate it if several such sets are needed.

The customer portal’s “Data Group” widget lets you choose a data source, and apply the desired criteria in order to yield only those items that are of interest. Here, the tickets to be presented must be open (i.e., not yet solved or completed), and should be listed in descending order by the date and time they were last updated. Also, the number of tickets to be displayed is limited to two.

If you wish to adjust a “Data Group” widget’s data settings, or even change its data source, simply click the currently selected one, “Ticket” in this case. You can then remove the data source using the trashcan button, and select a different one, change the attribute to use, or modify the criteria to apply, etc.

This widget is flexible enough to allow you to shape your remote data into exactly the form you need. Let’s dig a little deeper!

As indicated, the “Data Group” widget is a container that allows you to add any number of widgets to it. In the portal application, next to a “Space” and a “Headline” widget, a “Data Column List” and a “Data Empty” widget were added. The interesting part here is that the data settings of the “Data Group” widget define the context of all its child widgets, no matter how deeply nested they are. Every child widget capable of handling data items has access to the items determined by the “Data Group” widget at the top level.

The “Data Column List” widget renders as many columns as it is configured for via its properties. It automatically populates these columns by rendering its content, here the white box, a “Card” widget, for each item included in the data context. If the context doesn’t contain any items, the “Data Column List” widget isn’t rendered at all. In this case, the “Data Empty” widget is rendered instead. In “Edit” mode, both widgets are always visible.

By the way, the attributes of elements in the data context are also available as placeholders in, e.g., text and headline widgets, i.e., wherever text can be edited.

Let’s examine the “Card” widget used in the portal to present the core data of an item like a support ticket. As a matter of fact, the “Card” itself is merely used for design purposes, just like the “Columns” widget. The relevant pieces of data are rendered by a “Data Label” and a “Data Icon” widget inside the card. Both display an attribute from the “Data Group” widget’s “Ticket” context, “Keyword” (which actually is the ticket title) and the ticket “Type”, respectively.

You can of course use as many “Data Label” widgets as you need to display further content from the attributes available in the data context, like it’s done on the “Quotes” and “Orders” pages, for example.

Did you notice that list pages like these don’t have a “Data Group” widget for setting the data context? This is because the context originates from the pages themselves. It can be specified in their respective properties, and the items from this context can then be rendered using a “Data” widget that renders them one after the other.

The Customer Portal’s dashboard is an overview page, and as such, it is meant to offer easy access to more detailed information about the customer’s recent activities. The “Latest support tickets” section on the dashboard follows the same principles as the “Tickets” page showing many more entries and far more details for each item compared to the core data on the dashboard.

In both cases, the “Card” widgets used to present an item’s core data or its extended version are linked to the details page of the item concerned, making it easy for the customer to open the full view. Whenever you add a “Card” widget to a page or page area with a data context, you can link the card to the corresponding details page with just one click.

When, after clicking the linked element (the “Card” widget, in this case), the details page for a specific data item is to be displayed, Scrivito automatically appends the ID of the item concerned to the URL of the link, providing the details page with the context it requires to render the item’s attributes.

The JustRelate Customer Portal includes a variety of widgets that allow you to easily create dynamic content tailored to your customers' or field service employees’ needs. Form functions are also available so that your customers can spontaneously communicate with you. Thanks to the integration of Neoletter, JustRelate’s marketing automation tool, your customers can also subscribe to or unsubscribe from newsletters in the portal, for example.