Operation of the Dashboard Designer

Dashboards

Filling dashboards with actions, widgets, and other content elements is done through editing in the Design tab. The design of a dashboard is based on the size and form factor of the display area available in the client or caller toast. The layout of a dashboard is divided into rows and columns. It scales within the display area available on the client unless the width and height of the elements are set in absolute values. Drag and drop elements from the elements list to the desired row/column position in the design area. To display the row and cell structure, activate the “Show Structure” button A scalable (responsive) view usually requires the manual definition of the “HTML styles” of the elements. You can find them in the properties of the selected element.

Dashboard properties

  • Name

    Uniquely identifies the dashboard and serves as the display name in the navigation.

  • Activate dashboard

    Activate a dashboard so that it is played. You can see whether a dashboard is active or inactive in the navigation bar. If a dashboard is grayed out, it is inactive.

  • Description

    Enter a description here that describes the purpose of the dashboard and will help you develop it later.

  • Data sources

    Select the data sources whose data will be displayed in the dashboard.

  • Display location

    Select whether the dashboard should be displayed in the XPhone Client (in the conversation, contact card, or journal entry) or in the caller toast.

  • Client language

    Select the user language that the dashboard supports.

  • Additional conditions

    In addition to data source, display location and client language, other “filter conditions” can be defined to decide in which situation a particular dashboard should be displayed.

    Hint

    See also Define conditions.

Publish changes

If there are unpublished changes to a dashboard, this is indicated in the footer. Changes do not become active until you publish them.

Copy or delete dashboards

To duplicate (copy) or delete a dashboard, open it and click the menu menu in the upper right area.

  • Click Duplicate Dashboard or Delete Dashboard (and then confirm the deletion).

Actions

Actions are HTML hyperlinks that can execute commands in specific business applications. Essentially, these hyperlinks are parameterized by the data of a found contact. Action commands can be executed in a client’s web view (browser) or via a locally installed application plugin. For more information, see the Actions section.

Actions properties

  • Action Name

    The action name is a unique designation of the action and serves as the display name. The action name is a mandatory field and may only contain alphanumeric characters.

  • Run with

    Select a program from the list to run the action with.

    • Select Web Browser if you want to execute an action via a web call.

    • If you want to execute the call via a local program that is not explicitly listed, select Local program.

  • Application-ID

    The Application ID is a mandatory field and is used in the Dashboard Designer as a grouping element in the navigation tree. Depending on the program you select under Run with, the Application ID is automatically pre-populated.

    • If you have selected Web Browser there, the field is editable and fillable with alphanumeric characters.

    • If you have selected another program there, the field is preset and cannot be edited.

  • Link URL

    The link URL is a mandatory field. Enter the control command of the action here. The correct syntax depends on the selection under Run with.

    • If you selected web browser there, the syntax is the same as HTML syntax for a hyperlink in <a href> element.

    • If you have selected a different program there, take the link URL syntax from the corresponding example actions or the plugin manufacturer’s documentation.

  • Link text

    The link text is a mandatory field. It is displayed to the user in the dashboard and should describe the action as briefly and accurately as possible.

  • Tooltip text

    The tooltip text is displayed to the user when he moves the mouse pointer over the link text. It is intended to show the user additional information about the action. The tooltip text is optional. If this field is empty, no tooltip will be displayed.

  • Validation (user-defined conditions)

    Actions can only function if the required parameters from a contact data set are available. With the validation, conditions for a correct function of the action can be checked. If the conditions are not met, the action is not displayed. See also Hide empty fields by validation.

  • Icon

    An action can optionally be visually complemented by an icon. The icon should be chosen in such a way that the user can grasp the link text more quickly.

    Recommendation for optimal display:

    • Size: min. 14 x 14 px / max. 18 x 18 px

    • Format: SVG, PNG or JPEG

  • Action is used in

    In the reference list on the right, you can see in which widgets and dashboards the respective action is used. Changes you make to an action affect all items in the reference list.

Publish changes

If there are unpublished changes to an action, this is indicated in the footer. Changes do not become active until you publish them.

Copy or delete actions

To duplicate (copy) or delete an action, open it and click the menu menu in the upper right area.

  • Click Duplicate Action or Delete Action (and then confirm the deletion).

Widgets

Widgets are prefabricated parts of dashboards. They are largely identical to dashboards in terms of editing. They can be inserted into dashboards as modules. If a function complex is required in several dashboards, it makes sense to outsource it to a widget in order to avoid multiple maintenance.

Widget properties

  • Name

    Unique name of a widget.

  • Description

    Enter a description here that describes the purpose of the widget and will help you develop it later.

  • Widget is used in

    In the reference list on the right, you can see in which dashboards the respective widget is used. Changes you make to a widget affect all items in the reference list.

Publish changes

If there are unpublished changes to an action, this is indicated in the footer. Changes do not become active until you publish them.

Copy or delete widgets

To duplicate (copy) or delete a widget, open it and click the menu menu in the upper right area:

  • Click Duplicate Widgets or Delete Widgets (and then confirm the deletion).

Solutions

Under Solutions you will find an overview of the solutions provided by C4B for the XPhone Connect Dashboard Designer. Solutions can be downloaded and imported in the Dashboard Designer and are then available as a dashboard, action or widget.

  1. Navigate to Dashboard Designer > Solutions.

  2. Click on the Solutions page of your application.

  3. The Solutions page opens with more information about the functionality and usage of the solution.

  4. Download the ZIP file of the Solution and, if necessary, the explanatory PDF documents (instructions for importing and documentation of the Solution itself).

Attention

Before importing the solution, save the complete configuration of the Dashboard Designer using the Menu > Save > Save All.

  1. Click the Import button in the Dashboard Designer menu.

  2. Select the previously downloaded file.

  3. Click Start import to start the import.

  4. In case of collision of elements to be imported with already existing ones, a corresponding warning will appear - in this case decide whether to continue or cancel the import.

  5. The result of the import can be dashboards, actions or even widgets - for more details see the documentation of the respective solution.

Have you found a mistake on this page?

Or is something not formulated well or too vague? Then we look forward to receiving an e-mail, preferably with a suggestion for improvement, to doku@c4b.de. Thank you very much!