Customize the dashboard of a client application based on our developer libraries.

Introduction

The @yuuvis/widget-grid developer library allows users to individually customize the client's dashboard according to their preferences.

A demo application shows how to configure widgets and how to use them to provide saved searches for the client user.
>> Example Code on gitHub

Library Installation and Activation

Install and configure the @yuuvis/widget-grid and @yuuvis/widget-grid-widgets libraries with the widgets you want to enable for your users.
>> Library Installation

To enable the usage of a customizable dashboard in your client application, set the dashboardWorkspaces parameter to true in the main.json configuration file.

Users can now choose between the default dashboard and their self-designed custom dashboard via the client's settings menu.

Configuring Workspaces

The users can configure multiple different layouts for their dashboard and save them as so-called workspaces. To switch between workspaces, click the buttons with the workspace names on the bottom left.

Create a new workspace via the + Plus icon on the bottom left or edit the activated workspace via the Pencil icon on the bottom right. You can now

• add new widgets via the + Plus icon on the bottom right,
• change size and position of individual widgets by mouse actions
• delete individual widgets or
• edit individual widgets.

The edit mode for individual widgets depends on their concrete widget type.

The custom dashboard configuration is stored via USERSERVICE and is thus available in on any device in which users might log-in. However, the users can activate the usage of the default dashboard or the customizable dashboard depending on their used device.

Widget Types

The following widget types are provided as default by the libraries. You can easily extend the list with your own widgets according to your needs. Just create a component and register it.

• Hit list or count tile
  • Display some search results for a configured query.
• Stored query
  • Configure the search conditions you need often.
  • Specify the object type first if needed. A form with the corresponding metadata fields will open.
  • Specify conditions using the metadata fields if needed.
  • Specify a term for full-text search if needed.
  • Click Next to continue.
  • From the list of metadata fields presented on the left side, select the fields you want to fill via dashboard widget.
  • Click Next to continue.
  • Define the sorting that should be always applied to the hit list you will get for the search requests executed via this widget.
  • Tick the total hits checkbox to display the number of hits as a preview on the dashboard before opening the hit list view.
• Chart
• Quick search
  • Display a search bar on your dashboard.
• A picture
  • Add any image to your dashboard.
• ToDo list
  • Display a checkbox list.
• Summation
  • Specify a number-type metadata property available in one or more object types. All objects with this property will be searched and the values are totaled.
  • Additionally, you can apply conditions to the objects that should be included into the summation.
  • In the template field, you can add a measuring unit that will be always displayed with the calculated total number on the custom dashboard.