TABLE OF CONTENTS

• 1. Adding new widget
• 2. Widget “Welcome”
• 3. Widget “Sign-in/Sign-up”
• 4. Widget “Entity”
• 5. Widget “Stats”
• 6. Widget “General Map”
• 7. Widget “Weather”
• 8. Widget “Clock”
• 9. Widget “News”
• 10. Widget “Markdown”
• 11.  Widget “Active Calls”
• 12. Widget “Tasks”
• 13. Widget “Entities list”
• 14. Widget “Available offerings”
• 15. Widget “Lots”
• 16. Widget “Chartist line”

1. Adding new widget

2. Widget “Welcome”

Picture 35. Welcome widget

• selector key - ext-common/xm-widget-welcome

• imageSrc - specifies the URL of an image

• title - title name (Welcome to the XME.digital! default value)

• subtitle - title name (This is your homepage default value)

3.  Widget “Sign-in/Sign-up”

Picture 36

• selector key - xm-widget-sign-in-up

• signUpEnabled - to hide registration posibilitites from widget (default value is true)

• privacyAndTermsEnabled - to hide terms conditions and privacy policy agreemnet in registration (default value is false)

• privacyAndTerms - localized list with links to markdown resources (example: { "en": "<link>" })

4. Widget “Entity”

Picture 37

• selector key - ext-common-entity/xm-widget-entity

• grid - contains row elements to build a layout

  • class - row classes (example: row)

  • content - contains column elements for build a layout

    • class - column classes (example: col-sm-6 col-sm-offset-3)

    • component - entity component name. It could be:

      • entity-card

      • entity-data-card

      • function-list-card

      • attachment-list

      • location-list-card

      • link-list

      • comment-list

      • calendar-card

      • timeline
        

5. Widget “Stats”

Picture 38

• selector key - xm-widget-stats

• stats - tag contains an array with configuration for each statistic block

  • name - name of statistic block

  • color - color of statistic block

  • icon - icon of statistic block based on Google Material Icons

  • query - search query based on Query Syntax. Total count header of query uses.

6. Widget “General Map”

Picture 39

• selector key - ext-common-entity/xm-widget-general-map

• groups - each groups will be present as button switcher with own visualization on the map

  • name - name of group of markers

  • color - hexidecimal color for marker pin on the map

  • query - search query based on Query Syntax. XM Entities locations of query uses.

7. Widget “Weather”

Picture 40

• selector key - ext-common/xm-widget-weather

• city - city name geocoding

8.  Widget “Clock”

Picture 41

• selector key - ext-common/xm-widget-clock

9. Widget “News”

Picture 42

• selector key - ext-common/xm-widget-news

• url - URL to the RRS content

• size - count of news in widget that will be shown

10. Widget “Markdown”

Picture 43

• selector key - xm-widget-md

• content - markdown content

• isEditable - to provide possibility edit content

11.  Widget “Active Calls”

Picture 44

The widget uses Asterisk ARI interface and gets channels via credentials asterisk/asterisk. More about ARI API: List all active channels in Asterisk.

• selector key - xm-widget-active-calls

12. Widget “Tasks”

Picture 45

• selector key - ext-common-entity/xm-widget-tasks

• rootTypeKey - root type key for tasks visualization. 

13. Widget “Entities list”

Picture 46

• selector key - ext-common-entity/xm-widget-entities-list

• entities - tag contains array with configuration for each entity

  • typeKey - entity key from Entity Specification

  • query - search query based on Query Syntax without typeKey field.

  • name - entity localized name via map structure. For example: { "en": "Cars", "ru": "Машины" }

  • fastSearch - Fast Search functionality used to speed up entities selection on the widget page

    • name - name of searchable section

    • query - search query based on Query Syntax

  • fields - tag contains array with displayed fields

    • field - name of general entity or dataSpec parameters. For example: name, description, data.vin, etc.

    • title - column localized name via map structure

    • action - container for the action button configuration

      • name - action button localized name via map structure

      • functionKey - LEP function name with action logic

14. Widget “Available offerings”

Picture 47

• selector key - ext-common-entity/xm-widget-available-offerings

• query - search query based on Query Syntax

• functionKey - alternative option to search available offerings through the LEP function call. It should be used without query. LEP function could implement business logic: exclude already ordered offerings, provisioning, charging, etc.

• action - container for the action button configuration

  • enabled - true to show action button (default value is false)

  • name - action button localized name via map structure

  • functionKey - LEP function name with action logic

15. Widget “Lots”

Picture 48

• selector key - xm-widget-lots

16. Widget “Chartist line”

Picture 49

• selector key - ext-common-entity/xm-widget-chartist-line

• name - name of chart list

• size - count of points by X coordinates

• series - tag contains array with configuration for each chart line block (Limitation: it implemented only for one series)

  • name - name of chart line block

  • query - search query based on Query Syntax. Total count header of query uses.

  • sort - is used to sort the data by field in ascending or descending order

  • labelSelector - data selector for the labels - X coordinates labels

  • seriesSelector - data selector for the values - Y values

• options - tag contains array with configuration params specified for Chartist Line chart

  • axisX - options for X-Axis

    • offset - the offset of the labels to the chart area

    • position - the position where labels are placed. Can be set to start or end where start is equivalent to left or top on the vertical axis and end is equivalent to right or bottom on the horizontal axis.

    • labelOffset - allows correcting label positioning on this axis by positive or negative x and y offset. { x: -20, y: 0 }

    • showLabel - if labels should be shown or not

    • showGrid - if the axis grid should be drawn or not

    • labelInterpolationFnc - interpolation function that allows you to intercept the value from the axis label

    • type - set the axis type to be used to project values on this axis. If not defined, Chartist.StepAxis will be used for the X-Axis, where the ticks option will be set to the labels in the data and the stretch option will be set to the global fullWidth option. This type can be changed to any axis constructor available (e.g. Chartist.FixedScaleAxis), where all axis options should be present here.

  • axisY - options for Y-Axis

    • offset - the offset of the labels to the chart area

    • position - the position where labels are placed. Can be set to start or end where start is equivalent to left or top on the vertical axis and end is equivalent to right or bottom on the horizontal axis.

    • labelOffset - allows correcting label positioning on this axis by positive or negative x and y offset. `{ x: 0, y: 0 }

    • showLabel - if labels should be shown or not

    • showGrid - if the axis grid should be drawn or not

    • labelInterpolationFnc - interpolation function that allows you to intercept the value from the axis label

    • type - set the axis type to be used to project values on this axis. If not defined, Chartist.AutoScaleAxis will be used for the Y-Axis, where the high and low options will be set to the global high and low options. This type can be changed to any axis constructor available (e.g. Chartist.FixedScaleAxis), where all axis options should be present here.

    • scaleMinSpace - this value specifies the minimum height in pixel of the scale steps

    • onlyInteger - use only integer values (whole numbers) for the scale steps

  • width - specify a fixed width for the chart as a string (i.e. '100px' or '50%')

  • height - specify a fixed height for the chart as a string (i.e. '100px' or '50%')

  • showLine - if the line should be drawn or not

  • showPoint - if dots should be drawn or not

  • showArea - if the line chart should draw an area

  • areaBase - the base for the area chart that will be used to close the area shape (is normally 0)

  • lineSmooth - specify if the lines should be smoothed. This value can be true or false where true will result in smoothing using the default smoothing interpolation function Chartist.Interpolation.cardinal and false results in Chartist.Interpolation.none. You can also choose other smoothing / interpolation functions available in the Chartist.Interpolation module, or write your own interpolation function. Check the examples for a brief description.

  • low - overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value

  • high - overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value

  • chartPadding - Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}

  • fullWidth - when set to true, the last grid line on the x-axis is not drawn and the chart elements will expand to the full available width of the chart. For the last label to be drawn correctly you might need to add chart padding or offset the last label with a draw event handler.

  • reverseData - if true the whole data is reversed including labels, the series order as well as the whole series data arrays.

  • classNames - override the class names that get used to generate the SVG structure of the chart object { chart: 'ct-chart-line', label: 'ct-label', labelGroup: 'ct-labels', series: 'ct-series', line: 'ct-line', point: 'ct-point', area: 'ct-area', grid: 'ct-grid', gridGroup: 'ct-grids', vertical: 'ct-vertical', horizontal: 'ct-horizontal', start: 'ct-start', end: 'ct-end' }