Input forms

Shimoku provides multiple input fields and these can be linked to different logics to produce real-time outcomes. The Input form allows a rich variety of input components. You can use a rich variety of inputs and combine them passing it to s.plt.input_form().

An example on how to use the function:

input_data: Dict = {
  'fields': [
    {
      'title': 'Personal information',
      'fields': [
        {
          'mapping': 'name',
          'fieldName': 'name',
          'inputType': 'text',
        },
        {
          'mapping': 'surname',
          'fieldName': 'surname',
          'inputType': 'text',
        },
        {
          'mapping': 'age',
          'fieldName': 'age',
          'inputType': 'number',
        },
        {
          'mapping': 'tel',
          'fieldName': 'phone',
          'inputType': 'tel',
        },
        {
          'mapping': 'gender',
          'fieldName': 'Gender',
          'inputType': 'radio',
          'options': ['Male', 'Female', 'No-binary', 'Undefined'],
        },
        {
          'mapping': 'email',
          'fieldName': 'email',
          'inputType': 'email',
        }
      ]
    },
    {
      'title': 'Other data',
      'fields': [
        {
          'mapping': 'skills',
          'fieldName': 'Skills',
          'options': ['Backend', 'Frontend', 'UX/UI', 'Api Builder', 'DevOps'],
          'inputType': 'checkbox',
        },
        {
          'mapping': 'birthDay',
          'fieldName': 'Birthday',
          'inputType': 'date',
        },
        {
          'mapping': 'onCompany',
          'fieldName': 'Time on Shimoku',
          'inputType': 'dateRange',
        },
        {
          'mapping': 'hobbies',
          'fieldName': 'Hobbies',
          'inputType': 'select',
          'options': ['Make Strong Api', 'Sailing to Canarias', 'Send Abracitos'],
        },
        {
          'mapping': 'textField2',
          'fieldName': 'Test Text',
          'inputType': 'text',
        }
      ]
    }
  ]
}

s.plt.input_form(
    order=0, options=input_data
)

Resulting forms

As shown in the previous image the default size of each form component is 12 columns. To set a custom value for each one the sizeColumns must be specified:

input_data: Dict = {
  'fields': [
    {
      'title': 'Personal information',
      'fields': [
        {
          'mapping': 'name',
          'fieldName': 'name',
          'inputType': 'text',
          'sizeColumns': 4,
        },
        {
          'mapping': 'surname',
          'fieldName': 'surname',
          'inputType': 'text',
          'sizeColumns': 4,
        },
        {
          'mapping': 'age',
          'fieldName': 'age',
          'inputType': 'number',
          'sizeColumns': 4,
        },
        {
          'mapping': 'tel',
          'fieldName': 'phone',
          'inputType': 'tel',
          'sizeColumns': 4,
        },
        {
          'mapping': 'gender',
          'fieldName': 'Gender',
          'inputType': 'radio',
          'options': ['Male', 'Female', 'No-binary', 'Undefined'],
          'sizeColumns': 8,
        },
        {
          'mapping': 'email',
          'fieldName': 'email',
          'inputType': 'email',
          'sizeColumns': 12,
        }
      ]
    },
    {
      'title': 'Other data',
      'fields': [
        {
          'mapping': 'skills',
          'fieldName': 'Skills',
          'options': ['Backend', 'Frontend', 'UX/UI', 'Api Builder', 'DevOps'],
          'inputType': 'checkbox',
          'sizeColumns': 6,
        },
        {
          'mapping': 'birthDay',
          'fieldName': 'Birthday',
          'inputType': 'date',
          'sizeColumns': 6,
        },
        {
          'mapping': 'onCompany',
          'fieldName': 'Time on Shimoku',
          'inputType': 'dateRange',
          'sizeColumns': 4,
        },
        {
          'mapping': 'hobbies',
          'fieldName': 'Hobbies',
          'inputType': 'select',
          'options': ['Make Strong Api', 'Sailing to Canarias', 'Send Abracitos'],
          'sizeColumns': 8,
        },
        {
          'mapping': 'textField2',
          'fieldName': 'Test Text',
          'inputType': 'text',
          'sizeColumns': 12,
        }
      ]
    }
  ]
}

s.plt.input_form(
    order=0, options=input_data
)

Forms specifying the 'sizeColumns' field for each component

Retrieve input forms data

s.set_menu_path('input form')

input_data: List[Dict] = s.plt.get_input_forms()