Components

Components are modular pieces of ClearWork based on React.js that have been standardized and formatted to make it easy for you to configure pages. The following are available (click to see a description and usage):

Description:

The Page component is the highest level in ClearWork and defines many of the properties that are used throughout the rest of the actual web page. The properties available are:

  • icon – defines the icon that appears in the menu to the left of the page label. These are open source FontAwesomeicons.
  • slug – defines a unique page name that appears in the URL after the module name.
  • label – defines the page name that appears in the menu.
  • modules – defines the modules in which the page appears.
  • willMountActions – defines the actions to be executed once the page loads all of its components. Here is where you typically assign the Get API (e.g. GetCustomer, GetSalesOrder, etc.) for the entire page.
  • successActions – defines the actions to be executed provides the willMountActions are successful. Here you typically set the page to display mode and make sure to clear the user input fields.

API Usage:

Primary Get API

Example Configuration:

{
  "willMountActions": [
    {
      "actionName": "api",
      "successActions": [
        {
          "name": "updateDropdowns",
          "parameters": {
            "valueKey": [
              "payload",
              "GetCustomer",
              "CUSTOMER"
            ],
            "dropdownKey": [
              "dropdowns",
              "GetCustomer",
              "CUSTOMER"
            ],
            "labelKey": [
              "payload",
              "GetCustomer",
              "HEADER",
              "MCOD1"
            ]
          }
        }
      ],
      "parameters": {
        "api": "GetCustomer"
      }
    }
  ],
  "successActions": [
    {
      "actionName": "changeMode",
      "parameters": {
        "mode": "display"
      }
    },
    {
      "actionName": "deleteIn",
      "parameters": {
        "key": [
          "app",
          "user_parameters"
        ]
      }
    }
  ],
  "slug": "customer",
  "icon": "fa fa-users"
}

Description:

This component simply creates a new row based on the Bootstrap Grid System. and has no properties available.

Description:

This component defines a column within a row based on the Bootstrap Grid System. Each row in this system has 12 available columns. The properties available are:

  • xs – defines how many columns the children components occupy on viewports smaller than 576 pixels.
  • sm – defines how many columns the children components occupy on viewports between 576 and 768 pixels.
  • md – defines how many columns the children components occupy on viewports between 768 and 992 pixels.
  • lg – defines how many columns the children components occupy on viewports between 992 and 1200 pixels.
  • xl – defines how many columns the children components occupy on viewports larger than 1200 pixels.

Example Configuration:

{
  "sm": 12
}

Description:

This is simply a collection of tabs and has no properties available.

Description:

Within a page and set of tabs, an individual tab represents a logical grouping of tables, fields, and functionality. The properties available are:

  • slug – defines the text that appear in the URL after the page text.
  • title – defines the text that appears in the tab label.
  • onClick – defines the action that should be triggered when a user clicks on the tab.

API Usage:

Get API for data within the tab

Example Configuration:

{
  "slug": "attachments",
  "onClick": [
    {
      "actionName": "api",
      "api": "GetAttachments",
      "dynamicParameters": {
        "BORVALUE": [
          "payload",
          "GetCustomer",
          "HEADER",
          "KUNNR"
        ]
      },
      "parameters": {
        "BORTYPE": "KNA1"
      }
    }
  ],
  "title": "Attachments"
}

Description:

This component is simply a container for a section within a tab and has no properties available.

Description:

This component is simply a container for the BoxTitle component and has no properties available.

Description:

This component defines the text that appears as the header for a section.

Example Configuration:

{
  "text": "General Details"
}

Description:

This component is simply a container for the child components of a section and has no properties available.

Description:

This component allows a user to enter data into a single field that can be sent to ClearProcess. This is the most frequently used component and by far the most complex. The available properties are:

  • Label – the text that appears above the input.
  • Name – the unique name of the input on the page. This will be the key that is passed to ClearProcess based on its assignment in the ModeSwitcher component.
  • ModeProps – allows you to specify the editing and source properties for each mode. For example, you could specify that the input is only editable in Create mode. You could also specify that the source of the field is different in Change mode, which is useful when you need to populate the input with results from an API call to retrieve default values. You can also specify the default value of an input in Create mode by setting initialValue to any static value.
  • Suggestions – the drop down values that should appear in the input, if any. The action tells ClearWork where to retrieve the drop down values from the Drop Downs table. The child property indicates the source of the drop down values from the payload of the action that retrieved the drop down values. Additionally, there can be parent and grandparent values that filter the results of the drop down values, such as Country and State for addresses. For parent and grandparent properties, you can reference another input on the page or default to a static value.
  • maxResults – this is only valid if the Suggestions property is set. Typically this is set to -1 which tells the input to display drop down values immediately.
  • Source – in Display mode, this maps to the ClearProcess payload to retrieve the value that will be displayed in the input.
  • Editing – indicates whether the input can be edited in any mode.
  • Required – indicates whether the input is required in Create mode.
  • onBlur – this allows you to execute an Action when the user leaves the input. For example, you could make an API call to retrieve pricing on a material when the user has selected a material and moved to the next input.

API Usage

onBlur event can trigger any ClearAPI

Example Configuration:

{
  "modeProps": {
    "edit": {},
    "create": {
      "source": []
    },
    "display": {
      "editing": false
    }
  },
  "name": "REGIO",
  "suggestions": {
    "action": {
      "name": "getDropdown",
      "parameters": {
        "name": "REGIO"
      }
    },
    "parent": "LAND1",
    "child": [
      "payload",
      "GetDropdown",
      "REGIO",
      "values"
    ]
  },
  "maxResults": -1,
  "label": "State",
  "source": [
    "payload",
    "GetCustomer",
    "HEADER",
    "REGIO"
  ],
  "editing": true
}

Description:

This component allows a user to enter data into a table of fields that can be sent to ClearProcess. This is the second-most frequently used component and also the second-most complex. The available properties are:

  • Title – the text that appears above the table.
  • Name – the unique name of the table on the page. This will be the key that is passed to ClearProcess based on its assignment in the ModeSwitcher component.
  • ModeProps – allows you to specify any of the properties listed in a specific mode.
  • Sort – indicates if the table columns are sortable.
  • Source – in Display mode, this maps to the ClearProcess payload to retrieve the values that will be displayed in the table.
  • Editing – indicates whether the table data can be edited in any mode.
  • Paginate – indicates whether the table data should be organized into pages of results.
  • Filter – indicates whether the table data can be filtered using a Filter that appears above the table in the right corner.
  • Auto – when an ActionBar appears above the table, this should be set to false.
  • SelectionMode – indicates whether the user can select all rows at once (“multiple”), select rows only individually (“individual”), or not be able to select rows at all (“null”).
  • Columns – lists the columns that exist in the table.

Each column can contain child components with associated Formatters and Actions, some of which exist to the right in the example. Columns also have several special properties:

  • AutoIncrement – indicates whether the column contains an item number that should be incremented when new rows are added.
  • Label Component – indicates that the column should always be Read-Only.
  • Hidden – indicates that the column should always be hidden. To enable this, add “style”: {“display”: “none”} to the column’s properties.

API Usage

onBlur event of an input in a table can trigger any ClearAP

Example Configuration:

{
  "sort": false,
  "modeProps": {
    "create": {
      "sort": false,
      "filter": false,
      "paginate": false,
      "source": []
    },
    "display": {
      "sort": false,
      "filter": false,
      "selectionMode": null,
      "editing": false,
      "paginate": false
    }
  },
  "name": "ITEMS",
  "title": "Items",
  "auto": false,
  "paginate": false,
  "filter": false,
  "source": [
    "payload",
    "GetSalesOrder",
    "ITEMS"
  ],
  "selectionMode": "multiple",
  "editing": true,
  "columns": [
    {
      "autoIncrement": true,
      "formatter": {
        "name": "number",
        "format": "000000"
      },
      "component": {
        "name": "Label"
      },
      "name": "ITM_NUMBER",
      "label": "Item"
    },
    {
      "formatter": {
        "pathname": "products/material/?MATERIAL={MATERIAL}",
        "name": "linkTemplate"
      },
      "component": {
        "suggestions": {
          "child": [
            "dropdowns",
            "GetMaterial",
            "MATERIAL"
          ]
        },
        "name": "Input",
        "onSearch": {
          "action": "showModal",
          "name": "materialAdvancedSearch"
        }
      },
      "name": "MATERIAL",
      "label": "Material"
    },
    {
      "name": "SHORT_TEXT",
      "label": "Description"
    },
    {
      "formatter": {
        "name": "number",
        "format": "0,0.000"
      },
      "name": "REQ_QTY",
      "label": "Quantity"
    },
    {
      "formatter": {
        "name": "number",
        "format": "$0,0.00"
      },
      "name": "NET_VALUE",
      "label": "Amount"
    },
    {
      "formatter": {
        "name": "date",
        "format": "M/D/Y"
      },
      "component": {
        "name": "DatePickerInput",
        "inputFormatters": [
          {
            "name": "date",
            "parameters": {
              "format": "M/D/Y"
            }
          }
        ]
      },
      "name": "DELIVERY",
      "label": "Delivery Date"
    },
    {
      "component": {
        "editing": false
      },
      "name": "INVOICE",
      "label": "Invoice"
    }
  ]
}

Description:

This component provides a container for ActionButtons, which appear at the top of sections. The available properties are:

  • Label – the text that appears as the section header. IMPORTANT – if you are using an ActionBar in a section, you will need to disable that section’s default label. For sections with DataTables, this means setting the auto property to false. For sections with Inputs, this means setting the titleproperty to blank (“”).
  • Editing – allows you to specify whether the ActionButtons contained in the bar are active in Create and Change modes.
  • ModeProps – allows you to specify whether the ActionButtons contained in the bar are active in Display mode.

Example Configuration:

{
  "editing": true,
  "modeProps": {
    "display": {
      "editing": false
    }
  },
  "label": "Items"
}

Description:

This component allows you execute an action, which is typically an API call. The available properties are:

  • Label – the text that appears on the button
  • Icon – the FontAwesome icon that displays on the button with the “fa fa-” portion omitted.
  • bsStyle – the style of the button. Buttons above tables and sections should be small and use the “link” style, while buttons above tabs that are large should use the “primary” style.
  • onClick – the ClearWork Action that should be called when the user clicks on the button.

API Usage:

Any ClearAPI can be called

Example Configuration:

{
  "bsStyle": "link",
  "label": "Delete",
  "onClick": [
    {
      "action": "apiFromSelected",
      "api": "DeleteFileAttachments",
      "name": "ATTACHMENTS_FILE_ATTACHMENTS",
      "key": "ATTACHMENTS"
    }
  ],
  "icon": "times"
}

Description:

This component acts as a container for searches and other pop-up on a page. The available properties are:

  • name – the unique name identifying the modal within the page.
  • title – the title that should appear in the upper left corner of the modal.
  • onOpen – the ClearWork Action that should be called when the modal is opened.

Example Configuration:

{
  "name": "salesOrderAdvancedSearch",
  "title": "Search Criteria"
}

Description:

This component allows you to call a ClearAPI with all of its child Inputs and DataTables automatically sent without any additional configuration. This is typically used in Modals. The only property is submitActions, which specifies the ClearWork Actions that should be triggered when the form is submitted.

API Usage:

Any ClearAPI can be called

Example Configuration:

{
  "submitActions": [
    {
      "actionName": "deleteIn",
      "parameters": {
        "key": [
          "payload",
          "SearchSalesOrders"
        ]
      }
    },
    {
      "actionName": "api",
      "parameters": {
        "api": "SearchSalesOrders"
      }
    }
  ]
}

Description:

This component is simply a container for the main input at the top of most pages and has no properties. Its children typically include the main Input, the Mode Switcher, and the search Modal that is used for the main Input. You can include additional Action Buttons here that will appear right next to the Create and Change buttons.

Description:

This component allows you to specify what happens to data on the page when a users changes between modes. The available properties are:

  • Keys – here you specify the Inputs and DataTables that should be passed to ClearProcess.
  • onSave – here you specify the ClearAPI that should be called when the user clicks Save.
  • modeProps – here you specify the ClearAPI that should be called for specific modes. Typically you assign a different ClearAPI for Change mode that will override the ClearAPI specified by onSave.
  • Editing – indicates whether the page has Create and Change mode.
  • onCancel – specifies the ClearWork Actions to be called when the user clicks the Cancel button.
  • noCreate – if set to true, the Create button will not appear.
  • noEdit – if set to true, the Change button will not appear.

API Usage:

Create and Change APIs for each page.

Example Configuration:

{
  "keys": {
    "ITEMS": {
      "dataTables": [
        "ITEMS"
      ]
    },
    "PARTNERS": {
      "dataTables": [
        "DETAILS_PARTNERS"
      ]
    },
    "HEADER_TEXT": {
      "paths": [
        [
          "components",
          "textAreas",
          "HEADER_TEXT",
          "value"
        ]
      ]
    },
    "ORDER": {
      "paths": [
        [
          "app",
          "payload",
          "GetSalesOrder",
          "ORDER"
        ]
      ]
    },
    "HEADER": {
      "inputs": [
        "SOLD_TO",
        "DOC_TYPE",
        "SALES_ORG",
        "DISTR_CHAN",
        "DIVISION",
        "PURCH_NO",
        ""
      ],
      "datePickers": [
        "REQ_DATE_H",
        "PURCH_DATE"
      ]
    }
  },
  "onSave": [
    {
      "action": "apiFromKeys",
      "api": "CreateSalesOrder",
      "successActions": [
        {
          "name": "setIn",
          "parameters": {
            "value": {},
            "key": [
              "user_parameters"
            ]
          }
        },
        {
          "name": "changeMode",
          "parameters": {
            "mode": "display"
          }
        }
      ]
    }
  ],
  "editing": true,
  "modeProps": {
    "edit": {
      "inputKey": "payload",
      "onSave": [
        {
          "action": "apiFromKeys",
          "api": "ChangeSalesOrder",
          "successActions": [
            {
              "name": "changeMode",
              "parameters": {
                "mode": "display"
              }
            },
            {
              "name": "setIn",
              "parameters": {
                "value": {},
                "key": [
                  "user_parameters"
                ]
              }
            }
          ]
        }
      ]
    },
    "display": {
      "editing": false
    }
  },
  "onCancel": [
    {
      "action": "setIn",
      "value": {},
      "key": [
        "user_parameters"
      ]
    },
    {
      "action": "changeMode",
      "mode": "display"
    }
  ]
}

Description:

This component is nearly identical to Input with the sole exception that the user is forced to select a date from a calendar that appears when the user click in to the input. All other available properties are the same. For the initialValue property, use “now” to default to the current date.

When the date is passed to ClearProcess, it is in DateTime format, which means it must be manipulated to whatever format your target system is expecting for dates.

Example Configuration:

{
  "modeProps": {
    "edit": {},
    "create": {
      "source": []
    },
    "display": {
      "editing": false
    }
  },
  "name": "REQ_DATE_H",
  "required": true,
  "inputFormatters": [
    {
      "name": "date",
      "parameters": {
        "format": "M/D/Y"
      }
    }
  ],
  "label": "Delivery Date",
  "source": [
    "payload",
    "GetSalesOrder",
    "HEADER",
    "REQ_DATE_H"
  ],
  "editing": true
}

Description:

This component is nearly identical to Input with the sole exception that the values of a checkbox are restricted to True (checked) or False (not checked). All other available properties are the same.

Example Configuration:

{
  "source": [
    "payload",
    "GetRequisition",
    "HEADER",
    "NOT_RELEASED"
  ],
  "editing": false,
  "modeProps": {
    "edit": {
      "disabled": true
    },
    "create": {
      "source": []
    },
    "display": {
      "editing": false
    }
  },
  "name": "NOT_RELEASED",
  "label": "Not Released"
}

Description:

This component is nearly identical to Input with the sole exception that the user is forced to type a time through input formatters. All other available properties are the same. For the initialValue property, use “now” to default to the current time.

When the date is passed to ClearProcess, it is in DateTime format, which means it must be manipulated to whatever format your target system is expecting for dates.

Example Configuration:

{
  "modeProps": {
    "edit": {},
    "create": {
      "source": [],
      "initialValue": "now"
    },
    "display": {
      "editing": false
    }
  },
  "name": "START_TIME",
  "inputFormatters": [
    {
      "name": "time",
      "parameters": {
        "format": "hh:mm:ss"
      }
    }
  ],
  "label": "Basic Start",
  "source": [
    "payload",
    "GetWorkOrder",
    "HEADER",
    "START_TIME"
  ],
  "editing": true
}

Description:

This component is nearly identical to Input except that the user can type an unlimited amount of text. All other available properties are the same.

Example Configuration:

{
  "source": [
    "payload",
    "GetSalesOrder",
    "HEADER_TEXT"
  ],
  "modeProps": {
    "edit": {
      "editing": true
    },
    "create": {
      "editing": true
    },
    "display": {
      "editing": false
    }
  },
  "name": "HEADER_TEXT",
  "label": ""
}

Description:

This component allows you to display volumes of data in chart form to make it easier for your users to consume. The available properties are:

  • Source – indicates the payload key from ClearProcess that contains the data to be used by the chart.
  • Formatter – defines ClearWork Formatter to use for the values.
  • Type – defines the type of chart, which could be Bar, Line, or Doughnut.

Example Configuration:

{
  "source": [
    "payload",
    "GetSalesDashboard",
    "RevenueByMonth"
  ],
  "formatter": {
    "name": "number",
    "format": "$0,0.00"
  },
  "type": "bar"
}

Description:

This component allows you to trigger ClearWork actions when a user clicks a hyperlink within a DataTable. This is typically used in search modals to populate the input with the desired search result and to update the Last 10 in your browser’s history with that selected record.

API Usage

Any ClearAPI could be called.

Example Configuration:

{
      "component": {
        "name": "ActionLink",
        "onClick": [
          {
            "action": "updateInputValue",
            "name": "SOLD_TO"
          },
          {
            "action": "updateDropdowns",
            "parameters": {
              "valueKey": "CUSTOMER",
              "dropdownKey": [
                "dropdowns",
                "GetCustomer",
                "CUSTOMER"
              ],
              "name": "CUSTOMER_SEARCH_RESULTS",
              "labelKey": "NAME1"
            }
          }
        ]
      },
      "name": "CUSTOMER",
      "label": "Customer"
    }

Description:

This component allows you to change the properties of child components if criteria are met in the payload from ClearProcess. A perfect example is on the Work Orders page, where the Complete button only appears if the work order is not technically complete.

Example Configuration:

{
  "newProps": {
    "style": {
      "display": "block"
    }
  },
  "condition": "['app',
    'payload',
    'GetWorkOrder',
    'HEADER',
    'SYS_STATUS'] == 'CRTD MANC NMAT'"
}

Description:

This component is nearly identical to Input with the sole exception that you can change its properties based on a conditional. All other available properties are the same. Set the “hide” property to “true” if you want to hide the input when the conditional is not met.

Example Configuration:

{
  "editing": false,
  "hide": true,
  "condition": "['app',
    'payload',
    'GetCustomerInvoice',
    'HEADER',
    'REVERSED'] == 'X'",
  "name": "REVERSAL_DOC",
  "label": "Reversal Document",
  "source": [
    "payload",
    "GetCustomerInvoice",
    "HEADER",
    "REVERSAL_DOC"
  ],
  "modeProps": {
    "create": {
      "source": []
    },
    "display": {
      "editing": false
    }
  },
  "formatter": {
    "pathname": "customers/customer-invoice/?INVOICE={0}",
    "name": "linkTemplate"
  }
}

Description:

This component acts as a container for the badge elements that appear at the top of many of the dashboards, such as the Aged Receivables page. There are 3 distinct sets of configuration that appear to the right:

  • Info Box – defines the overall container for the badge.
  • Icon Box – defines the container for the icon that displays on the badge. The color of the badge is specified here with available colors from the open source Basscss package.
  • Info Box Content – defines the container for the text and values that display on the badge.

Example Configuration:

{
  "className": "info-box"
}

Example Configuration:

{
  "className": "info-box-icon bg-green"
}

Example Configuration:

{
  "className": "info-box-content"
}

Description:

This component specifies the icon that appears on a badge. These are open source FontAwesome icons.

Example Configuration:

{
  "className": "fa fa-dollar"
}

Description:

This component is used for both the text and values that appear in a badge, with both examples shown to the right.

Example Configuration:

{
  "className": "info-box-text",
  "text": "Open Balance"
}

Example Configuration:

{
  "className": "info-box-number",
  "source": [
    "payload",
    "GetCustomerAccountBalance",
    "OpenBalance"
  ],
  "inputFormatters": [
    {
      "name": "number",
      "parameters": {
        "format": "$0,0.00"
      }
    }
  ]
}

Description:

This component is only used to display T-Accounts for accounting documents, and thus only appears on the Documents and FI-CA Documents pages. Its only property is the data source from the GetDocument and GetFicaDocument payloads that are returned from ClearProcess.

Example Configuration:

{
  "source": [
    "payload",
    "GetDocument",
    "TACCOUNTS"
  ]
}