Color Input - JSON Editing

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 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 “Color Input” 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
      ⌄
      ⌄
      ⌄
      ⌄
      {
      "name": "color", /* Name of the field in the data model */
      "description": "Color for to be used in UI for display purposes", /* description used when user toggles help fields */
      "label": "Color", /* Name displayed to the user in the form */
      "type": "color", /* Input Type - uses the color wheel input */
      "disabled": false, /*ability to enable/disable user entry on this field */
      "dataPath": "color", /* path where the collected input is to be stored in the data model after form submission */
      "validation": {
      "required": false /* toggle validation of required or not */
      },
      "defaultValue" : "#cccccc", /* Default color code you can set if desired */
      "query": {
      "fields": [
      "color"
      ]
      }
      }
      It should look just 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

    • Fuuz Form Detail Screen Specification

      Fuuz Industrial Intelligence Platform Article Type: Standard Standard Form Design Specification A unified framework for building single-record editing screens across Master Data, Transactional, and Setup applications—ensuring consistent user ...

    • Array Input

      The Array Input element can be used in the Screen Designer by dragging the element into the Screen Designer Canvas. Within the 'Basic' editable properties in the Editor Panel, the Array input can be customized to have a label that will present on the ...

    • JSON

      The JSON input uses the Monaco library for its editor, so it has some very powerful tools built-in. You can access Monaco’s Command Palette by pressing the F1 key, where you can view and search for any additional functionality provided by the editor. ...

    • JSON Schema Inputs

      Within Fuuz you can use a JSON Schema to generate a dynamic form that builds JSON data from a users inputs. The JSON schema inputs can be expanded to use components found in the Screen Designer through the inputProps field. For more information about ...

    • Setup Data Table Screen Design Standard

      Article Type: Standard / Reference Audience: Solution Architects, Application Designers, Developers Module: Fuuz Platform - Application Designer Applies to Versions: 2025.12+ Template Reference: Table_Screen_Design_Template_-_Setup_0_0_1.json 1. ...