StatusIndicator

Create a StatusIndicator component to create an HtmlElement component that indicates a status that can be updated on the back-end. The status indicator can look as follows:

Initialization

The initialization is done by calling the constructor with at least two inputs:

InputDescriptionDatatype
keyKey used to reference the status indicator. Use this key later on to update the status.String
parentThe parent container. Can be any component or the root form.Component/Root form

Additional options can be given as name-value pairs:

NameDescriptionDatatypeDefault
ContentText to display on the status indicator.String'Status'
DefaultValueDefault status value.String'muted'
StatusesDefines the value and Bootstrap theme of every reachable status. Has fields value and theme, which shall have an equal amount of elements. An optional field content defines the text to display per status. If the statuses.content field and a DefaultValue are provided, this defines the initial text of the status indicator and any Content name-value pair is ignored.Struct/dict
  • value: {"muted", "primary", "success", "info", "warning", "danger", "secondary", "dark", "light"}
  • theme: {"muted", "primary", "success", "info", "warning", "danger", "secondary", "dark", "light"}

The StatusIndicator component creates an HtmlElement for displaying the status. The object of the HtmlElement can be found in the displayComponent property. Further customization such as adding a customConditional to it, can be performed using that property: obj.displayComponent.customConditional = "show = data.nr > 5".

Updating

Update the status in your guiEvent code using:

payload = composedComponent.StatusIndicator.update(...
    payload, key, status, nestedFormKey, "Parent", parentKey);

where key is the key provided when creating the StatusIndicator, status is one of the items of statuses.value and nestedFormKey is an optional nested parent form. Use the Parent name-value pair to further specify which status indicator must be selected.

Example

% Initialize using defaults:
testStatus = composedComponent.StatusIndicator("testStatus", form);

% Initialize using options:
testStatus = composedComponent.StatusIndicator(...
    "testStatus", form, ...
    "Content", "Tests", ...
    "DefaultValue", "notRun", ...
    "Statuses", struct(...
    "value", {'notRun', 'running', 'success', 'failed'}, ...
    "theme", {'secondary', 'warning', 'success', 'danger'}));
    
% Update the status:
payload = composedComponent.StatusIndicator.update(payload, "testStatus", "failed");

# Initialize using defaults:
testStatus = composed_component.StatusIndicator("testStatus", form)
        
# Initialize using options:
testStatus = composed_component.StatusIndicator(
    "testStatus", form,
    content="Tests",
    defaultValue="notRun",
    statuses=[{
        "value": "notRun",
        "theme": "secondary"
    }, {
        "value": "running",
        "theme": "warning"
    }, {
        "value": "success",
        "theme": "success"
    }, {
        "value": "failed",
        "theme": "danger"
    }]
)

# Update the status:
composed_component.StatusIndicator.update(payload, "testStatus", "failed")