Widget

Description

Display a provided widget controls based on configuration in layout for user interaction.

Attributes

• tile: Widget to be displayed for e.g "field" | "dropdown" | "timezone" | "color" | "date" | "attachment" | "block" | "select" | "radio" | "radioList" | "time" | "checkbox" | "phone" | "boolean" | "dropdown".
• title: Title of widget controls
• form: [Objects]
  • property: Path property to identify the handle.
  • className: Classes for controls
  • config: Configuration related widget
  • opts: Conditional options
  • default: Default values
  • condition: Condition for display widget or not
  • enum: Display a value which flitter out from the options list. Provide a value which you want to filter out.

Example1

{
    "tile": "field",
    "title": "Please enter title",
    "form": {
      "property": "title",
      "default": "Test Title"
    }
}

Example2

{
  "tile": "timezone",
  "title": "TimeZone Field Testing",
  "form": {
    "property": "timezone",
    "default": "Chicago"
  }
}

Example3

{
  "tile": "color",
  "title": "Widget Testing",
  "form": {
    "property": "color",
    "default": "#F44E3B"
  }
}

Example4

Configuration

• form: [Objects]
  • format: Any Date format by default is ll.
  • openTo: Date picker open with provided things by default is Day.
  • force: True | false.Indicate to force update date value with default value by default is false, so it updates the value with default value.

{
  "tile": "date",
  "title": "Date of birth",
  "form": {
    "property": "dob",
    "default": "2000-01-01",
    "config": {
      "format": "MMMM D, YYYY",
      "openTo": "year",
      "force": true
    }
  }
}

Example5

{
  "tile": "attachment",
  "title": "Attachment Testing",
  "form": {
    "property": "taskImage",
    "opts": {
      "entity": "org"
    }
  }
}

Example6

Configuration

• form: [Objects]
  • config: [Objects]
    • rows: number of rows to be enter data in the textField.
    • maxRows: Up to Maximum number of rows to be enter data in the textField.

{
    "tile": "block",
    "title": "Block tile Testing",
    "form": {
      "property": "introduction",
      "config": {
        "rows": 3,
        "maxRows": 6
      },
      "default": "Test Blocking"
    }
}

Example7

Configuration

• form: [Objects]
  • opts: [Array of string] Provide a list of item to be display in the select box.
  • default: Default value to be display from the list of item.

{
  "tile": "select",
  "title": "Select Tile Testing",
  "form": {
    "property": "nameStyle",
    "opts": [
      "success",
      "danger",
      "primary",
      "secondary",
      "info",
      "dark",
      "warning"
    ],
    "config": {
      "className": "w50 pl-1"
    },
    "default": "primary"
  }
}

Example8

{
    "tile": "radio",
    "title": "Radio tile Testing",
    "form": {
     "property": "gender",
     "opts": ["Male", "Female", "Other"]
    }
}

Example9

{
  "tile": "radioList",
  "title": "Radio List Tile Testing",
  "form": {
    "property": "taskType",
    "default": "Single",
    "opts": ["Single", "Groups"]
  }
}

Example10

{
  "tile": "checkbox",
  "title": "Checkbox tile Testing",
  "form": {
     "property": "nameStyle",
     "opts": [
      "success",
      "danger",
      "primary",
      "secondary",
      "info",
      "dark",
      "warning"
    ],
     "config": {
      "className": "w50 pl-1",
      "sort": true,
      "transform":"capitalize"
    },
    "enum": ["success","primary", "warning"]
  }
}

Example11

Configuration

• form: [Objects]
  • default: Provide a default it should "t" || "f". By default is "f".

{
    "tile": "boolean",
    "title": "Boolean tile Testing",
    "form": {
     "property": "checkStatus",
     "default": "t"
    }
}

Example12

{
  "tile": "dropdown",
  "title": "DropDown Tile Testing",
  "form": {
     "property": "tile",
     "opts": ["table", "chart", "chartSparse", "marker", "content",
        "text", "wiki", "catalog", "radio", "heatmap", "stack", "achievements"],
    "config": {"className": "w50 pl-1", "sort": true, "transform":"capitalize"},
    "default": "chart"
  }
}