A page is the central component of ClearWork and represents a single business process or work function that can span many systems. In the example below, our most frequently used page gives users a 360° view of a customer with single-click access into their history of orders, invoices, account balance, and other events in the lifecycle of a customer:

ClearWork Page

Launching the UI Builder

The UI Builder is the central location in ClearWork where you can maintain the pages that your users see in the application. You must be a Clear administrator to be able to launch the UI Builder:

Step 1

Click on your user name in the upper right corner of any page to see the Administrator Menu. Click on the UI Builder option.

Launching UI Builder Step 1

Step 2

The UI Builder will display. Use the Collapse All button to collapse the tree structure of the page and navigate component-by-component.

Launching the UI Builder Step 2

Copying Pages

Clear recommends that you never create a page from scratch since it is very time consuming. It is much more efficient to find a page whose layout you like, then copy that page and configure it to your needs:

Step 1

Click on the copy icon at the top-most level in the page tree.

Copying Pages Step 1

Step 2

A copy will be created.

Copying Pages Step 2

Creating Modules

A module is a logical group of pages and typically corresponds to a business unit within your organization. To create or change modules, navigate to Tools > Modules:

Creating Modules

Assigning Pages to Modules

You can assign a page to one or more modules. This is especially helpful when you want to create modules for two different departments within your organization, but you want both departments to have access to the same page:

Step 1

To assign modules, click on the Properties button at the top-most level in the page tree.

Assigning Pages To Modules Step 1

Step 2

To select more than one module, hold down the Control button (Command on Mac) and click on each desired module.

Assigning Pages To Modules Step 2

Deleting Pages

Clear recommends that you never delete a page. You will almost always want to use it at a later date. Instead, simply un-assign a page from its module and it will no longer appear to users, but it will still be available in the UI Builder. However, if you are still hell bent on deleting a page, then:

Step 1

Click the Delete button at the top-most level in the page tree.

Deleting Pages Step 1

Step 2

The UI Builder will refresh with the latest set of pages.

Deleting Pages Step 1

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"
  ]
}

Actions

Actions allow you trigger functionality in your internet browser that can update the contents of the page and make API calls to your systems. The following are available:

Description:

By far the most used action in ClearWork, this allows you to call a ClearAPI using values from fields on the page and static values. The following properties are available:

  • api (Required) – the ClearAPI to be called.
  • dynamicParameters – values from the page that should be passed.
  • parameters – static values that should be passed regardless of the content on the page.
  • successActions – an array of actions that should be executed if the call is successful.
  • errorActions – an array of actions that should be executed if the call fails.

API Usage:

Input, Tab, ActionButton, RpcForm, Page

Example Configuration:

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

Description:

This allows you to call a ClearAPI from within a ModeSwitcher using keys specified in the ModeSwitcher. The following properties are available:

  • api (Required) – the ClearAPI to be called.
  • successActions – an array of actions that should be executed if the call is successful.
  • errorActions – an array of actions that should be executed if the call fails.

API Usage:

ModeSwitcher

Example Configuration:

"onSave": [
        {
          "action": "apiFromKeys",
          "api": "UpdateUsers",
          "successActions": [
            {
              "name": "changeMode",
              "parameters": {
                "mode": "display"
              }
            },
            {
              "name": "setIn",
              "parameters": {
                "value": {},
                "key": [
                  "user_parameters"
                ]
              }
            }
          ]
        }
      ]

Description:

A variant of apiAction, this action allows you to call a ClearAPI based on rows currently selected in a DataTable. The name parameter indicates the DataTable name from which the rows should be selected, while the key parameters indicates the key to which the array of data will be assigned in ClearProcess in the user_parameters request payload.

API Usage:

ActionButton

Example Configuration:

"onClick": [
    {
      "action": "apiFromSelected",
      "api": "DeleteFileAttachments",
      "name": "ATTACHMENTS_FILE_ATTACHMENTS",
      "key": "ATTACHMENTS"
    }
 ]

Description:

Another variant of apiAction, this action allows you to call a ClearAPI based on a file uploaded by the user. It employs the same parameters as apiAction for static and dynamic values.

API Usage:

ActionButton

Example Configuration:

"onClick": {
    "action": "apiFromFile",
    "api": "AddFileAttachment",
    "dynamicParameters": {
      "BORVALUE": [
        "app",
        "payload",
        "GetCustomer",
        "HEADER",
        "KUNNR"
      ]
    },
    "parameters": {
      "BORTYPE": "KNA1"
    }
  }

Description:

Another variant of apiAction, this action allows you to call a ClearAPI based on a clicked hyperlink in a row of a DataTable. The columns parameters indicates which columns from the clicked row should have their values passed to the ClearAPI.

API Usage:

DataTable

Example Configuration:

"component": {
  "name": "ActionLink",
  "onClick": [
    {
      "action": "apiFromRow",
      "api": "GetFileAttachment",
      "columns": [
        "ATTA_ID"
      ]
    }
  ]
}

Description:

This action allows you to update the Last 10 history for a searchable field. The valueKey indicates the value of the field while the labelKey provide a user-friendly description for that value, such as Customer Name or Material Description. The dropdownKey indicates which dropdown should be updated in your browser’s history.

API Usage:

Input, Page, DataTable

Example Configuration:

{
  "name": "updateDropdowns",
  "parameters": {
    "valueKey": [
      "payload",
      "GetCustomer",
      "CUSTOMER"
    ],
    "dropdownKey": [
      "dropdowns",
      "GetCustomer",
      "CUSTOMER"
    ],
    "labelKey": [
        "payload",
        "GetCustomer",
        "HEADER",
        "MCOD1"
      ]
    }
}

Description:

This action allows you to close a modal. A use case would be a second action after an apiAction is triggered, such as when a user pays some open items on the Account Balance tab on the Customers page. The only parameter is the modal name.

API Usage:

ActionButton

Example Configuration:

"onClick": {
  "action": "hideModal",
  "name": "payItems"
}

Description:

This action allows you to open a modal. he only parameter is the modal name.

API Usage:

ActionButton, Input

Example Configuration:

"onSearch": {
  "action": "showModal",
  "name": "customerAdvancedSearch"
}

Description:

This action allows you to add a row to a DataTable while in Create or Change mode. The only parameter is the name of the DataTable. Upon save, these new rows are passed to ClearProcess with a field called CRUD_TYPE whose value is set to “I”.

API Usage:

ActionButton

Example Configuration:

"onClick": {
  "action": "addRow",
  "name": "ITEMS"
}

Description:

This action allows you to delete the selected rows of a DataTable while in Create or Change mode. The only parameter is the name of the DataTable. Upon save, these new rows are passed to ClearProcess with a field called CRUD_TYPE whose value is set to “D” if the rows of data already exist in your target system. If they do not exist, for example you added the row and then deleted it before saving, then nothing is passed to ClearProcess.

API Usage:

ActionButton

Example Configuration:

"onClick": {
  "action": "deleteSelected",
  "name": "ITEMS"
}

Description:

This action allows you to extract selected rows of a DataTable to another dataset specified. The name parameter refers to the DataTable from which the rows should be extracted, while the to parameter indicates the name of the new data set. Use cases for this action exist on the Account Balance tab in the Customers and Vendors pages, where you can select multiple rows and take action on them.

API Usage:

ActionButton

Example Configuration:

"onClick": {
  "action": "extractSelected",
  "to": "PAY_ITEMS",
  "name": "OPEN_ITEMS"
}

Description:

This action allows you to download the selected rows of a DataTable to Excel. If no rows are selected, the entire contents of the DataTable are downloaded. The only parameter is the name of the DataTable.

API Usage:

ActionButton

Example Configuration:

"onClick": {
  "action": "downloadSelectedAsCSV",
  "name": "OPEN_ITEMS"
}

Description:

This action is only used on the Mass Upload page. It allows you to download a template for the data that will be uploaded, based on the fields specified in the File Layout table.

API Usage:

ActionButton

Example Configuration:

"onClick": {
  "action": "downloadCSVTemplate",
  "name": "LAYOUT"
}

Description:

This action allows you to change the state of a page from its current state to a new state. Valid states include create, edit, and display.

API Usage:

ActionButton

Example Configuration:

{
      "actionName": "changeMode",
      "parameters": {
        "mode": "display"
      }
}

Description:

This action allows you to change the tab of a page from its current tab to another tab. This is particularly useful when a page needs to be reset to its first tab.

API Usage:

Page, ActionButton

Example Configuration:

{
      "actionName": "changeTab",
      "tab": "masterData"
}

Description:

This action allows you to the selected rows of a DataTable while you’re in Create or Edit mode.

This is useful for copying line items whose data is mostly the same to avoid tedious data entry.

API Usage:

Page, ActionButton

Example Configuration:

{
      "actionName": "duplicateSelected",
      "name": "ITEMS"
}

Description:

This action allows you to open a URL. Typically the URL is returned as the result of a ClearAPI call and thus openUrl appears in the successActions. The following properties are available:

  • url (Required) – a static URL in quotes or a dynamic URL in the page state.
  • newTab – if true, the URL is opened is a new browser tab.

API Usage:

ActionButton

Example Configuration:

"onClick": [
    {
      "action": "apiAction",
      "api": "OfficeDepotSetup",
      "successActions": [
        {
          "name": "openUrl",
          "parameters": {
            "url": [
              "app",
              "payload",
              "OfficeDepotSetup",
              "xml",
              "cXML",
              "Response",
              "PunchOutSetupResponse",
              "StartPage",
              "URL"
            ],
            "newTab": false
          }
        }
      ]
    }
]

Description:

This action allows you to clear the value of a component in a page. The valid components that can be cleared are inputs, datePickers, timePickers, textAreas, and dataTables.

API Usage:

ActionButton

Example Configuration:

{
      "action": "clear",
      "inputs": [
        "SHIP_TO",
        "PURCH_NO_C",
        "REF_1",
        "REF_1_S",
        "ORDERER_NA",
        "SALES_DIST",
        "WBS_ELEM",
        "INVOICE",
      ],
      "textAreas": [
        "HEADER_TEXT"
      ],
      "datePickers": [
        "REQ_DATE_H"
      ]
}

Description:

This action allows you to clear all data in a page.

API Usage:

ActionButton

Example Configuration:

{
      "action": "clearAll",
}

Description:

This action allows you to override a user’s default fields from a ClearAPI call. This is useful when a process has specific rules about default values being overridden, such as a Customer’s default plant should override the user’s default plant.

API Usage:

ActionButton

Example Configuration:

{
      "action": "updateDefaultFields",
      "source": [
        "payload",
        "GetCustomerDefaults",
        "DEFAULTS"
      ],
      "fields": [
        "PLANT", 
        "CURRENCY"
      ]
}

Description:

This action allows you to update the values of an entire column in a DataTable. If the value property is left blank, the Default Value from that column is automatically populated.

API Usage:

Input, ActionButton

Example Configuration:

{
      "action": "updateColumnValues",
      "column": "PLANT",
      "name": "ITEMS",
      "value": "1001"
}

Description:

This action allows you to update the default value of a table column.

API Usage:

Input, ActionButton

Example Configuration:

{
      "action": "updateDefaultValue",
      "column": "PLANT",
      "name": "ITEMS"
}

Description:

This action allows you to select all or deselect all checkboxes in a DataTable. This is useful when you need to clear checkboxes after processing a ClearAPI call. The only parameter is the name of the table to be toggled.

API Usage:

ActionButton

Example Configuration:

{
      "action": "toggleAll",
      "name": "WORKLIST_ITEMS"
}

Formatters

Formatters allow you to style data from your backend system in way that is more intuitive to your users. The following Formatters are available for the following Components:

Description:

Allows you to format a field as a date.

Component:

DatePickerInput

Example Configuration:

 "inputFormatters": [
{
"name": "date",
"parameters": {
"format": "M/D/Y"
}
}
]

Result:

Component:

Table

Example Configuration:

    {
      "formatter": {
        "name": "date",
        "format": "M/D/Y"
      },
      "component": {
        "name": "DatePickerInput",
        "inputFormatters": [
          {
            "name": "date",
            "parameters": {
              "format": "M/D/Y"
            }
          }
        ]
      },
      "name": "DELIVERY",
      "label": "Delivery Date"
    }

Result:

DateTable

Description:

Allows you to format a field as a time.

Component:

TimePickerInput

Example Configuration:

    "formatter": {
      "name": "time",
      "format": "hh:mm:ss"
    }

Result:

TimeInput

Component:

Table

Example Configuration:

    {
      "formatter": {
        "name": "time",
        "format": "hh:mm:ss"
      },
      "name": "CREATED_TIME",
      "label": "Created At"
    }

Result:

TimeTable

Description:

Allows you to format a number using any valid numbro formatter.

Component:

Input

Example Configuration:

  "formatter": {
    "name": "number",
    "format": "$0,0.00"
  }

Result:

NumberInput

Component:

Table

Example Configuration:

    {
      "formatter": {
        "name": "number",
        "format": "$0,0.00"
      },
      "name": "NET_PRICE",
      "label": "Total"
    }

Result:

NumberTable

Component:

Chart

Example Configuration:

    {
      "formatter": {
        "name": "number",
        "format": "$0,0.00"
      },
      "name": "NET_PRICE",
      "label": "Total"
    }

Result:

NumberChart

Description:

Allows you to format a field as a hyperlink to another page with variable URL parameters that are pulled from other fields on the page.The properties available are:

  • pathname – specifies the URL to be called along with any dynamic values that should be passed as URL parameters.
  • target – if you want to launch the URL in a separate tab, specify “_blank” as the value for this parameter, otherwise you don’t need to specify this parameter.

Component:

Input

Example Configuration:

  "formatter": {
    "pathname": "customers/customer/?CUSTOMER={0}",
    "name": "linkTemplate"
  }

Result:

LinkInput

Component:

Table

Example Configuration:

    {
      "formatter": {
        "pathname": "customers/customer-invoice/?INVOICE={INVOICE}",
        "name": "linkTemplate"
      },
      "component": {
        "editing": false
      },
      "name": "INVOICE",
      "label": "Invoice"
    }

Result: