PreviewCard widget

The PreviewCard is a temporary card that shows the details panel for an asset, with the ability to select a More Details dialog box and an More Actions menu.

The user can select an asset from the map, then preview the details on a preview card with the information of asset.

ifef.widget.previewcard.PreviewCard

titleProperty:: String, the name of property in the data object. The property value shows as the title of preview card.

position:

A String or Array that specifies the position of the preview card. If it is a string, then the string content is the property name Position in the data object. The property name Position is defined by an array of two numbers in the data object or a domNode. If it is an array with two numbers, the preview card shows in the fixed position. The first number of array specify x value and the second number specify y value of current page.

properties:

An array that specifies the properties that show on the preview card content panel or more details dialog box.

name: String, the property name.
label: String, label of property that shows on content panel.
isKey: Boolean, if true this property shows on content panel, if false the property shows on the More details dialog box.
index: Numeric, if an index is specified, shows the indexed order.
render: Object, defines the rules to render the property value:
- numberFormatOptions: Object, shows the options to format a number as a string. Refer to the dojo/number document.
- dateFormatOptions: Object, shows the options to format a date as a string. Refer to the dojo/date/locale document.
templates: Array, defines the conditions and template strings to render property values.
- condition: String, a condition returns either a true or false status. Any property in data can be referenced as a condition, for example: STATUS=1
- content: String, an html segment template that contains variables.
- variables: Object, key or value pairs used to replace the variables in the content.

moreActions:

Array, shows the More actions menu

label: String, shows the name of the menu item.
children: Array, defines the sub-menu items.
func: Function, invoke when you click the menu item. Available when sub-menu items are not specified.
options: Object, used by the ‘func’ function.

The properties

The properties are:

data:: A key or value object, when the data is set the review card is filled by the data object, and shows.

Example

The example shows the use of a preview card.

{
     "id":"overheadlineMapPreviewCard",
     "module":"ifef/widget/previewcard/PreviewCard",      
     "properties":["data"],
     "parameters": {                      
          "titleProperty": "NAME",                      
          "position": "_position",                      
          "properties": [                                      
               {"label":"@{dno_nls.Asset_ID}", "name":"ASSET_ID", "isKey":true},                                      
               {"label":"@{dno_nls.Serial_Number}","name":"SERIAL_NUMBER", "isKey":true},                                      
               {"label":"@{dno_nls.NAME}","name":"NAME", "isKey": true},                                      
               {"label":"@{dno_nls.Description}","name":"DESCRIPTION", "isKey":true},                                      
               {                                                      
                    "label":"@{dno_nls.STATUS}",                                                      
                    "name":"STATUS",                                                      
                    "isKey": true,                                      
               "render":{
     "templates": [                      
          {                      
          condition":"STATUS==0",                      
          "content":"<span style='background-color:green'>${Acceptable}</span>",                      
          "variables":{"Acceptable":"@{dno_nls.Acceptable}"}
     },{                      
          "condition":"STATUS==1",                      
          "content":"<span style='background-color:orange'>${Caution}</span>",                      
          "variables":{"Caution":"@{dno_nls.Caution}"}
     }]                      
          }},                                      
               {"label":"@{dno_nls.Location}","name":"LOCATION"}                      
          ],                      
          "moreActions":[  { "label":"@{nls.HighlightOnMap}",
          "func":"@{highlightOnMap.highlightOnMap}"} ]
            }
     }