Create dashboards

In this chapter you will learn how to create a Standard Dashboard or a Custom Dashboard.

Create standard dashboards

To create a dashboard, click Create > New Dashboard in the main menu and then assign a name. The name must be unique and must not contain any spaces or special characters. Optionally, you can use the Description button to show the description field and add a description to help you edit the dashboard in the future.

Select data source(s)

In order for a dashboard to be played out for a contact, information about that contact is required. To provide this, the system can search one or more data sources for the contact. In the Data Sources tab, you can specify whether the dashboard

• for a single data source

• for multiple data sources or

• for any data sources

should be displayed.

The dashboard is displayed based on the data source where the contact is found first. If you select multiple or any data sources here, the data source priority decides the order in which the data sources are searched:

• The priority of the data sources is maintained in the XPhone Connect Directory.

• The data sources listed are sorted in descending order of priority.

• If you move the mouse cursor over the data sources, you will see the data source priority in the tooltip: the higher the value, the higher the priority.

• If several data sources have the same priority, they are searched in parallel.

Define conditions

In the Conditions tab, you can define conditions for displaying dashboards by answering the following questions:

• Where should the dashboard be displayed?

• For which client language version should the dashboard be displayed?

• What other conditions must be met for the dashboard to be displayed?

Where should the dashboard be displayed?

Dashboards can be displayed either in the client or in the caller popup.

• Client

  Dashboards created for the XPhone Client can be shown or hidden during a conversation via the i-icon. In addition, the dashboards can be opened in the contact card and in the journal via the “Dashboard” tab.

• Caller popup

  These dashboards are displayed in the popup when a call is received and can thus be seen before the call is answered. Dashboards for the caller popup should be a maximum of 294 x 90 pixels.

Hint

In order for a dashboard to be played out in the client or in the popup, the corresponding dashboard settings must be made in XPhone Server Administration. This is done for the respective user group under User Management > Location > Client > Dashboard.

For which client language version should the dashboard be displayed?

If you select the all client languages option, the client language has no effect on the display of the dashboard. If, on the other hand, you define that the dashboard should only be displayed for a specific language version, the dashboard will only be displayed if the XPhone client language of the respective user matches the client language version defined here. This is relevant if you want to localize dashboards. To create additional language versions for a dashboard, duplicate it and adjust the elements it contains. If actions or widgets are included in the dashboard, it may be beneficial to create separate language versions for them.

Other conditions for displaying dashboards

Here you can define conditions that must be met for a dashboard to be played out. The conditions can be related to the contact (Contact variables), the dashboard user (User variables) and/or the call state (Call variables).

Example

The dashboard should only be displayed to employees of the sales department. To do this, select User.DEPARTMENT equal Sales or instead of Sales enter the appropriate string for your Sales department.

• The operand check does not work case-sensitive.

• If more complex filters are required, the Add group and Add rule buttons can also be used to add further conditions, which can be linked according to the rules of Boolean algebra and/or.

• The list of context variables available for selection can be found under Variable names of data fields.

Personal dashboard

The conditions can also be configured so that the XPhone user has his own dashboard. To do this, select User.EMAIL1 equal {Contact.EMAIL1}.

To do this, you can access your own contact card by double-clicking on your own picture in the XPhone Client.

These dashboards could be used, for example, to include time tracking and start/stop it, book a workstation (e.g. via Desk.ly) or display a collection of links to the most important company tools.

Design dashboard

Switch to the Design tab to get to the visual editor. The basic layout of a dashboard consists of an HTML table with a variable number of rows. Any number of horizontally arranged cells is possible in each row. If the width of a row is not sufficient, the cells are wrapped. The layout editor allows the creation, insertion and deletion of fields (cells). Depending on the insertion position, new rows are created or cells are inserted into existing rows. Rows have a blue frame, cells have an orange frame. The insertion of elements is done by drag & drop via the elements bar to the left of the design area. The insertion position is indicated by a colored field in the design area when mouse over. To display the structure permanently, you can activate it via the Display structure button.

The Elements panel contains the following elements:

Content elements

• HTML/JS:

  Freely modifiable HTML element, see HTML and JavaScript

• IFrame

  HTML iFrame with which an external web page can be embedded, see iFrames

• Separator

  Horizontal line to better organize the view

• Text

  Text field that can designate a data field, for example

Variables

• Data Field: Call

  Data fields with information about a call, see Call

• Data Field: Contact

  Data fields with information about a contact, see Contact

• Data Field: User

  Data fields with information about the logged in user, see User

Actions Contains all actions configured via the component list

Widgets Contains all widgets configured via the component list

Fill dashboard with elements

Elements can be dragged and dropped from the Elements panel onto the Dashboard Canvas. Once an element is selected, its properties and style can be adjusted in the edit bar to the right of the design area. Individual elements, cells, rows or the entire Dashboard Canvas can be selected. Depending on the selected element, different properties can be adjusted.

Delete items from dashboard

To remove items from the Dashboard, select it and click the Delete button in the upper right corner or press the Delete key on your keyboard. Then confirm the operation.

Hiding elements and additional conditions

Elements that are filled with data during runtime (e.g. variables) can be automatically hidden via the Hide if data field empty option if no data is available for this data field.

To hide a data field when another data field is empty (e.g. Contact.NAME is filled but Contact.FIRSTNAME is not), user-defined conditions can be created:

Another use case for user-defined conditions is, for example, the display of a text label. The display of a text (e.g. Name:) is in many cases only useful if the following variable(s) are also filled with data:

Hint

• Validations (custom conditions) defined in widgets or actions are not displayed again in the properties panel of a dashboard.

• Note that Actions cannot be executed during design.

Content styling

The formatting of a selected element can be done in the Edit Bar in the Styling section. Using the dropdown Styles, the selected element can be formatted with a predefined style. The HTML attributes set by the selected style are then listed below.

To customize styles, you can edit the set attributes or define additional style attributes using the Additional Styles input field. This creates an additional line per style. The styles take effect immediately after leaving the input field, and the result can be examined immediately in the design view. You delete a style by deleting the contents of the field and then exiting the input field.

The meaning and syntax of styles can be found in common sources of information on the Internet, e.g. at W3Schools - Styles.

Stlyes can also be defined manually directly via the input field additional styles without using style sheets.

Width of fields, margins and spacing

The width and height of selected elements can be set with the mouse pointer by clicking and dragging the double arrow or can be defined using the Width and Height style attributes in the Edit Bar under Style.

In addition to the absolute setting in pixels (px), the unit millimeter (mm) or percent (%) can be selected. The percentage is only useful if there is more than one field per line. The number indicates the ratio in which the fields share a line. Note that the sum of the percentages should not be 100, but a few points less. The margin or padding style can be used to define indentations and spacing of the fields so that a harmonious layout results (see e.g. W3Schools - Margin and W3Schools - Padding).

Preview

Navigate to the Preview tab to simulate the display of the dashboard in the pseudo-client (simplified representation of the XPhone Client or the caller toast). In the Preview, the dashboard is filled with data that you can store and edit in preview data sets. This allows you to simulate how a dashboard will behave when the dashboard is populated with appropriate data or not. In addition, the preview in the pseudo-client can be used to test how a dashboard reacts to changes in the size of the client. For this purpose, the size of the pseudo-client can be adjusted analogously to the real XPhone client in the lower right corner.

Hint

Whether the dashboard is simulated in the XPhone Client or in the caller toast depends on the selected display option under conditions Where should the dashboard be displayed?. Manual resizing of the caller toast is not possible.

• To create a new dataset, click the create New Preview button.

• Assign a speaking name in the edit bar on the right side.

• Fill Call, User or Contact data fields with the desired preview data.

• Under Contact, you can perform an XPhone Connect Directory search and automatically populate the Contact variables for a contact from the appropriate data source.

• Then save the preview.

Select preview set

Existing preview data sets are listed in the left panel. To populate the dashboard in the pseudo-client with a specific data set, click it. The dashboard will then be populated with the data from that dataset. If desired, the selected dataset can then be edited using the edit bar on the right.

Delete preview set

To delete a data set, click on the menu next to the name field and click Delete Preset.

Copy preview set

To copy a dataset, click the menu next to the name field and click Duplicate Preset.

Activate & publish dashboard

For the dashboard to be displayed in live mode, it must be activated.

In addition, changes to dashboards do not take effect until they are published.

Create custom dashboards and components

Create action

The dashboard is supposed to perform a Google search based on a piece of information from the contact box.

• Create a new action.

  • Click Create > New Action in the menu

  • The dialog box Create new action opens.

    • Enter a Name

      • e.g. MyGoogleSearch

    • Select the Application ID.

      • The Application ID is the folder in which this action should be created.

    • click on the Create Action button.

• The action is displayed directly and you can configure the action.

  • The action now appears in the directory under Actions > Browser.

  • The action is to perform a Google search based on a piece of information from the contact box.

    • Google search requires this URL:

      https://www.google.de/search?q=blabla
      

  • Copy the URL into the Link URL field and click the icon next to it.

    • The correct syntax depends on the selection under Run with.

    • Since you selected Web Browser there, the syntax is the same as the HTML syntax for a hyperlink in the <a href> element.

    • In the new dialog box, you can customize the URL and use the drop-down fields to select variables from the following contexts:

      • Call State

      • User

      • Contact

    • The URL should be adjusted as follows:

      https://www.google.de/search?q={Contact.FIRSTNAME}+{Contact.NAME}
      

  • Create a link text and open the editor by clicking .

    • 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.

    • The link text can be enriched with variables. You can add these in the editor using the corresponding buttons.

    • Customize the link text as follows:

      Google nach {Contact.FIRSTNAME} {Contact.NAME}
      

  • The Tooltip Text is displayed to the user when the user hovers 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.

  • Actions can only function if the required parameters from a contact data set are available. The validation can be used to check conditions for a correct function of the action. If the conditions are not met, the action will not be displayed.

    • The following conditions can be selected:

      • is empty

      • is not empty

    • Example:

      Contact.ACCOUNTCODE is not empty
      

• 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

Create widgets

• Create a new widget.

  • Click Create > New Widget in the menu

  • The dialog box Create new widget opens.

  • Enter a Name

    • e.g. MyGoogleSearchWidget

• The widget will be displayed directly and you can configure it.

  • Drag and drop the Action > BROWSER MyGoogleSearch into the configuration area.

    • You can drag even more elements into this widget.

  • On the far right you will find the properties of the action. they can:

    • Define additional conditions and

    • change the appearance using styles.

    • When you are satisfied, click Publish.

Create dashboards

• Create a new dashboard.

  • Click Create > New Dashboard in the menu

  • The dialog box Create new dashboard opens.

  • Enter a Name

    • e.g. MyGoogleSearchDashboard

• Define in the tab Data sources for which data source this dashboard should be displayed:

  • Any data source

  • Selected data source(s)

    • The data sources created in the XPhone Connect Directory appear here.

• Switch to the Conditions tab and answer the questions:

  • Where should the dashboard be displayed?

  • For which client language version should the dashboard be displayed?

  • What other conditions must be met for the dashboard to be displayed?

• Switch to the Design tab:

  • Drag and drop elements into the design area.

    • E.g. your self-created action Actions > BROWSER > MyGoogleSearch.

    • or your widget Widgets > MyGoogleWidget.

    • You can drag even more elements into this widget.

  • On the far right you will find the properties of the actions and widgets. You can:

    • Define additional conditions and

    • change the appearance using styles.

  • When you are satisfied, click Publish.

• Switch to the Preview tab:

  • Here you can check how the dashboard looks like in the pseudoclient.

  Tip

  See also chapter: Development, testing and debugging

Have you found an error on this page?

Please send us a hint about this error by mail to doku@c4b.de. Thank you very much!