Creating a valid Component

Components are the building blocks of a form screen. They are used to display values that you don't want to store in the database, link to other pages, or trigger actions.

To create a valid Component object, you need to understand the structure and elements of the Component class. Below is a detailed documentation of each type of Component object.

Component Object

A Component object represents a UI component in the form and contains various elements such as type, data, name, and other optional properties.

Elements of Component

type

• Type:
  • product_dispatcher
  • dispatcher
  • catalogue_dispatcher
  • campaign_dispatcher
  • table
  • card_list
  • links
  • pagination
  • summary
  • status_display
  • text
  • image
  • svg
  • additional_column_qualifier
  • linked_contact
  • event_creator
  • button
• Description: The type of the component.

Example:

"type": "text"

data

• Type: dynamic
• Description: The data associated with the component. Different components require different types of data.

Example:

"data": "Example Text"

name

• Type: String
• Description: The name of the component. Used to identify the component in layout.

Example:

"name": "example-text"

options

• Type: Options?
• Description: Additional options for the component. See each component type for specific options.

Example:

"options": {
  "display": {
    "color": "red",
    "font-size": 14
  }
}

child

• Type: Layout?
• Description: The layout of the child component.

Example:

"child": {
  "type": "column",
  "children": [...]
}

popup

• Type: FormPopup?
• Description: A popup associated with the component. Only applicable for buttons.

Example:

"popup": {
  "title": "Delete Product?",
  "content": "Are you sure you want to delete the product?",
  "actions": [
    {
      "text": "Yes",
      "action": "ok"
    },
    {
      "text": "No",
      "action": "quit"
    }
  ]
}

filters

info

For the Lua functions used in the filters, you can use the _F object to access the current field value.

• _F.item is the current item the function is filtering.
• _F.value is the value of the filter, for the example below, _F.value would be Products present or Products absent.

• Type: List<ComponentFilter>?
• Description: A list of filters applied to the component. Only applicable for tables, dispatchers and cardList. The filter's values are static or generated by a Lua function.

Example:

"filters": [
   {
     "name": "Presence",
     "type": "checkbox",
     "values": [
       {
         "function": "getSavedFieldByIdAndCurrentMetadataAndSubMetadata(\"produit-present\", {[\"product\"] = _F.item}) == true",
         "label": "Products present"
       },
       {
         "function": "getSavedFieldByIdAndCurrentMetadataAndSubMetadata(\"produit-present\", {[\"product\"] = _F.item}) == false",
         "label": "Products absent"
       }
     ]
   },
   {
       "calculated_values": "gen_filter_values()",
       "name": "All products filter",
       "type": "checkbox"
   },
]

function gen_filter_values()
	    local products = getProducts()
	    local result = {}
	    for i, product in pairs(products) do
	        local filter_value = {
	            ["label"] = product.name,
	            ["function"] = "_F.item == \"" .. product.uuid .. "\""
	        }
	        table.insert(result, filter_value)
	    end
	    return result
end

screen

• Type: ScreenLink?
• Description: A link to another screen based on a condition.

Example:

"screen": {
  "condition": "true",
  "screen_name": "next_screen"
}