Simian GUI Documentation v2.2.1

The Hidden component

Hidden components can contain data that is included in the submission data, but is not visible to the user. Hidden values can be used as data that has no meaning to the user and should not be changed, but may be required for the computational code, for instance unique identifiers of a set of data.

A special use case of hidden values is to set component properties that would otherwise not be part of the submission data.

This component inherits properties and methods from the superclass Component. For example, any Hidden component has a defaultValue property even though this is not explicitly listed here.

Properties

Example

A good example of a value that is not part of the submission data, is the html field of the Content component. Since it is not a value, it cannot be updated after initiliazation of the form. However, it is possible to reference the value of another component. In this example we will use a Hidden component to adjust the displayed text after initialization. A very similar approach can be used for the HtmlElement component. Please note that the Html component can have its HTML content changed directly, without the need for a Hidden component.

function payload = guiInit(~)   
    form = Form();

    header = component.Content("header", form);
    header.html = "<h1 class=""display-1"">{{data.headerContent}}</h1>";
    header.refreshOnChange = true;

    headerContent = component.Hidden("headerContent", form);
    headerContent.defaultValue = "Hello, world!";

    headerButton = component.Button("headerButton", form);
    headerButton.label = "Say Hi!";
    headerButton.setEvent("SetHeader");

    payload.form = form;
end

function payload = guiEvent(~, payload)    
    if payload.action == "event"
        if payload.event == "SetHeader"
            payload = utils.setSubmissionData(payload, "headerContent", "Hi, world!");
        end
    end
end

def gui_init(_meta_data: dict) -> dict:
    form = Form()

    header = component.Content("header", form)
    header.html = '<h1 class="display-1">{{data.headerContent}}</h1>'
    header.refreshOnChange = True

    header_content = component.Hidden("headerContent", form)
    header_content.defaultValue = "Hello, world!"

    header_button = component.Button("headerButton", form)
    header_button.label = "Say Hi!"
    header_button.setEvent("SetHeader")

    payload = {"form": form}

    return payload


def gui_event(_meta_data: dict, payload: dict) -> dict:
    if payload["action"] == "event":
        if payload["event"] == "SetHeader":
            utils.setSubmissionData(payload, "headerContent", "Hi, world!")

    return payload