Text Input - JSON Editing

Text Input - JSON Editing

Creating a screen, sometimes it is quick and easy to use the modal feature within a table or form design to engage with your end users to create or update a record in Fuuz. You can certainly use the screen designer to drop in the input components you want, but you can also use this feature to create very simple screens that still have some pretty amazing capabliities.

Instructions

Step-By-Step:

  1. Navigate to the Screen Designer Application
  2. Open or Start a screen of choosing
  3. (Adding a Modal?) Select or Add an Action on your screen that will trigger the pop-up
  4. After adding the Action button you can add an ‘action’
  5. Select the “Form” option - this will allow you to define a pop-up form by using JSON data to format the screen the user will interact with
  6. Provide a Name for your Form - As shown above “New Modal Pop Up” - this name will be displayed to the end user - so typically this would read “Create New Something” or “Edit Something”
  7. Click the 4 way Arrow above the “Form Fields” section to use the full screen editor
  8. Now with the Editor panel in full view, you can quickly add any inputs you need to the form -
  9. We’re going to add a “TextInput” object to the layout following these steps:
    1. Add the text object: 
    2. 1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      ⌄
      ⌄
      ⌄
      ⌄
      ⌄
      [
      {
      "name": "name", /* should match your data model field name */
      "description": "This is my cool new text input field", /* displays to the user when displaying help fields*/
      "label": "Name", /* sets the name of the field the user will see */
      "type": "text", /* sets the input type - and how the user interacts with the input */
      "dataPath": "name", /* set based on the field in your data model to update */
      "disabled": false, /* set to true to disable the input */
      "validation": {
      "required": true /* set to true, to require user to enter input */
      },
      "defaultValue": "my default text input", /* the default value, user can change, unless you disable the field */
      "query": {
      "fields": [
      "name" /* references the data model field */
      ]
      }
      }
      ]
      It should look like this in the editor: 

    3. Modify the input as you need:
      1. You can change the Label, Required, DefaultValue, Disabled or any other attributes to fit your need.
  10. When finished, your end user will see something like this:

    • Related Articles

    • Color Input - JSON Editing

      Creating a screen, sometimes it is quick and easy to use the modal feature within a table or form design to engage with your end users to create or update a record in Fuuz. You can certainly use the screen designer to drop in the input components you ...

    • Form

      In the context of screen design and web pages within Fuuz, a "form" refers to a specific user interface element or component that facilitates data input, collection, and submission within the Fuuz Manufacturing platform. Here's a definition tailored ...

    • Interaction

      Screen Elements in the Interaction category provide quick components that allow the user to interact with the screen.

    • Screen Designer Terminology

      This is where we can provide a “dictionary” of common terminology a user might encounter while navigating the interface, reading our documentation, or discussing the designer. The goal is to provide a place they can go if they see or hear a phrase ...

    • Screen Designer Layout

      Toolbox Tabs The toolbox tabs are on the right-hand side of the screen designer which includes Elements tab, Properties tab, Layers Tab and the Tabs. Elements Tab It houses all of the available screen elements that you can add to your screen. You can ...