Variables Table

Description

A widget to display and manipulate variables used by the Camunda Platform suite.

Usage

Options

= cam-variables
The variable to be edited / displayed contained in an array as following
[
  {
    variable: {
      name: 'variableName',
      type: 'String',
      value: 'Some string value'
    },

    // is aimed to hold additional column information
    additions: {
      additionalColumn1: 'cell content',
      additionalColumn2: 'other cell content'
    }
  },
  {
    // ...
  }
]
Note: if the cell content of an additional column is an HTML string, you need to use something like $sce.trustAsHtml('Some <i>HTML</i> string').
=? cam-headers
Takes an object to determine which columns should be shown, their positions and which text should be used in their headers.
By default, the following columns are shown (with their respective header):
  1. name: Name
  2. type: Type
  3. value: Value
Example
=? cam-editable
Takes an array of strings to determine which columns are editable.
Valid strings:
  • name
  • type
  • value
By default, all the above are editable.
Example
=? on-save(info, delta): promise
Can be used to pass a function triggered when saving.
The info argument is an object with information about the variable similar to:
{
  "variable": {
    "type": "...",
    "name": "...",
    "value": "...",
    "valueInfo": "..."
  },
  // ...
}
Example
=? on-delete(info, delta): promise
The info argument is similar to the one above.
=? on-edit(info, delta): promise
Can be used to customize the modal dialog shown when editing a complex variable.
The info argument is similar to the one above.
If not used, a generic modal dialog will open.
Example
=? on-upload(info, delta): promise
Can be used to customize the modal dialog shown when editing a complex variable.
The info argument is similar to the one above.
=? on-download(info, delta): string URL
Can be used to customize create a download link for the variable.
The info argument is similar to the one above.
=? is-variable-editable(info, delta): boolean
Can be used to pass a function to check whether a variable is editable or not. When the variable is not editable then the edit buttons are disabled.
The info argument is similar to the one above.

Examples

Editable variables

<div cam-widget-variables-table
     cam-variables="vars"
     on-edit="editFunction"
     on-save="saveFunction"
     cam-headers="[
    { class: 'name',      request: 'variableName', sortable: true,  content: 'Name'},
    { class: 'value',     request: '',             sortable: false, content: 'Value'},
    { class: 'type',      request: '',             sortable: false, content: 'Type'},
    ]"
         default-sort= "{ sortBy: 'variableName', sortOrder: 'asc' }"
     is-variable-editable="isVariableEditable"></div>

<ol>
  <li ng-repeat="change in changes">{{ change.name }} | {{ change.type }} | {{ change.value }} | {{ change.saved }}</li>
</ol>
{{changes}}
  1. {{ change.name }} | {{ change.type }} | {{ change.value }} | {{ change.saved }}

Custom columns

<h4>Editable and additions</h4>
<div cam-widget-variables-table
     class="first"
     on-download="formatDownloadLink"
     cam-editable="['value']"
     cam-headers="[
          { class: 'plain',     request: '',             sortable: false, content: 'Plain'},
          { class: 'name',      request: 'variableName', sortable: true,  content: 'Name'},
          { class: 'value',     request: '',             sortable: false, content: 'Value'},
          { class: 'type',      request: '',             sortable: false, content: 'Type'},
          { class: 'formatted', request: '',             sortable: false, content: 'Formatted'}
        ]"
     default-sort= "{ sortBy: 'variableName', sortOrder: 'asc' }"

     cam-variables="vars"></div>

<h4>Read only</h4>
<div cam-widget-variables-table
     class="second"
     default-sort= "{ sortBy: 'variableName', sortOrder: 'asc' }"
     cam-editable="[]"
     cam-headers="[
          { class: 'name',      request: 'variableName', sortable: true, content: 'Variable name'},
          { class: 'plain',     request: '',             sortable: false, content: 'Plain text'},
          { class: 'value',     request: '',             sortable: false, content: 'Value'}
          ]"

     cam-variables="vars"></div>

Editable and additions

Read only