Base de conhecimento

Campo de texto

• "inputType": "textinput"
  • Descrição: Um campo de texto livre simples
  • Exemplo:

"text_input": {
    "title": "Text Input",
    "inputType": "textinput",
    "value": "Valor de texto livre",
    "info": "Um campo de texto livre"
}

Área de texto

• "inputType": "área de texto"
  • Descrição: uma caixa de texto para entrada de texto mais longa.
  • Exemplo:

"textarea_input": {
    "title": "Text Area",
    "inputType": "textarea",
    "value": "Check this out",
    "info": "Agora com 20% mais espaço para sua redação."
}

Vários campos de texto

• "inputType": "entrada de texto múltiplo"
  • Descrição: O usuário pode adicionar vários campos de texto de entrada com valores separados. Use maxValue para definir o número máximo de valores que podem ser inseridos.
  • Exemplo:

"multiple_text_input": {
    "title": "Multiple Text Input",
    "inputType": "multiple-text-input",
    "value": [
        {
            "element": "Hello"
        },
        {
            "element": "World"
        }
    ],
    "maxValue": 4,
    "info": "Um máximo de 4 valores é permitido"
}

Campo suspenso

• "inputType": "entrada suspensa"
  • Descrição: um campo suspenso com opções selecionáveis. Use elements como o atributo específico para adicionar os valores desejados como elementos JSO anônimos que representam as opções suspensas. Cada elemento deve conter um nome e um valor.
  • Exemplo:

"bluetooth_connect_mode": {
    "title": "Modo de conexão",
    "inputType": "dropdown-input",
    "value": "search",
    "elements": [
        {
            "name": "Search and Find",
            "value": "search"
        },
        {
            "name": "Scanning Code",
            "value": "scan"
        }
    ],
    "showIfComputed": true,
    "info": "'Pesquisar e Localizar' irá descobrir todos os dispositivos disponíveis e filtrá-lo dependendo do tipo. 'Code Scan' permite que você digitalize o endereço MAC ou o nome do dispositivo."
}

Vários campos suspensos

• "inputType": "entrada suspensa múltipla"
  • Descrição: Usando o campo de entrada suspenso de vários níveis, o usuário pode adicionar várias instâncias do mesmo campo suspenso e, assim, escolher vários valores para seu pedido. Os atributos específicos são:
    • maxValue para definir o número máximo de valores que podem ser escolhidos
    • elements: para adicionar elementos JSON anônimos que representam as opções suspensas (cada elemento deve conter um nome e um valor)
  • Exemplo:

"multiple_dropdown_input": {
            "title": "Multiple Dropdown Input",
            "inputType": "multiple-dropdown-input",
            "value": [
                {
                    "name": "Shown Value"
                },
                {
                     "name": "Shown Value 2"
                },
            ],
            "elements": [
                {
                    "name": "Shown Value"
                },
                {
                    "name": "Shown Value 2"
                },
                {
                    "name": "Valor Mostrado 3"
                }
            ],
            "maxValue": 2
        }

Caixa de seleção

• "inputType": "checkbox-input"
  • Descrição: Uma entrada de alternância booleana
  • Exemplo:

"checkbox_input": {
    "title": "Checkbox Input",
    "inputType": "checkbox-input",
    "value": "true"
}

Intervalo de números

• "inputType": "intervalo"
  • Descrição: Uma entrada de intervalo de números
  • Exemplo:

"range": {
    "title": "Intervalo de leitura",
    "inputType": "range",
    "rangeMin": "1",
    "rangeMax": "20",
    "value": 15
}

Upload de arquivos

• "inputType": "upload de arquivo"
  • Descrição: Permite que o usuário carregue um arquivo de imagem.
  • Exemplo:

"sensor_type": {
    "inputType": "file-upload",
    "title": "Ícone",
    "accept": "image/png",
    "multiple": false,
    "showIf": "root. Value_1.sensor_shown.value",
    "value": "xai:/wf-editor/2c639f9c-a3d5-4830-9e55-092fe98d92a4/component_sensor_1563203048508_image001.png?version=1",
    "showIfComputed": true
}

Seletor de Cores

• "inputType": "entrada de cor"
  • Descrição: Uma entrada para selecionar uma cor. Os usuários podem definir uma lista de valores hexadecimais para selecionar ou usar o seletor de cores completo.
  • Exemplo:

"color": {
    "inputType": "color-input",
    "title": "Color Picker",
    "list": [
        "#fcba03",
        "#1d6280"
    ],
    "showIfComputed": true,
    "value": "#fcba03"
}

Entrada de mapa

• "inputType": "map-input"
  • Descrição: um campo de entrada de texto que associa uma chave e um valor como em um mapa. Por padrão, os espaços reservados nos campos de texto serão "Chave" e "Valor". Eles podem ser alterados como visto no exemplo abaixo.
  • Exemplo:

"headers": {
    "title": "Http Headers",
    "inputType": "map-input",
    "placeholder": {
        "key": "Header Name",
        "value": "Header Value"
    },
    "value": [
        {
            "key": "Content-Type",
            "value": "application/json"
        },
        {
            "key": "Accept",
            "value": "aplicação/json"
        }
    ]
}

Para salvar os dados de entrada de mapa em um mapa Javascript real, siga esta abordagem:

<setvar id="save_headers">
    <context_of>workflow</context_of>
    <context_update>
        <param name="headers" type="object"><![ CDATA[?{ var headers = { §{#each configuration.headers.value}§'§{key}§': '§{value}§',§{/each}§ }; headers }?]] ></param>      
    </context_update>
</setvar>

Entrada da fonte de dados

• "inputType": "seleção de fonte de dados"
  • Descrição: um campo suspenso que permite selecionar entre todas as fontes de dados carregadas no Frontline Command Center. Isso permite que você associe dinamicamente seu componente a diferentes fontes de dados.
  • Exemplo:

"datasource": {
            "noOptionsInfo": "Nenhuma fonte de dados encontrada!",
            "title": "Datasource",
            "inputType": "datasource-selection",
            "revisionSelection": true,
            "required": true,
            "info": "Selecione a fonte de dados que você deseja usar.",
            "value": null
        }