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. Actions can be triggered by the following properties on the following components:

  • Input – the onBlur property.
  • Tab – the onClick property.
  • ActionButton – the onClick property.
  • Page – the willMountActions property.
  • ModeSwitcher – the onSave and onCancel properties.
  • RpcForm – the submitActions property.

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”. Valid page components for this action are:

  • ActionButton

Properties

PropertyDescription
actionSet this to “addRow” to use this action.
nameThe name of the DataTable where a row should be added.

Example

Add the following to your component:

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

By far the most used action in ClearWork, this allows you to call a Clear API using values from fields on the page and static values. Valid page components for this action are:

  • Input – the onBlur property can be used to trigger this action.
  • Tab – the onClick property can be used to trigger this action.
  • ActionButton – the onClick property can be used to trigger this action.
  • Page – the willMountActions property can be used to trigger this action.
  • ModeSwitcher – the onSave and onCancel properties can be used to trigger this action.
  • RpcForm – the submitActions property can be used to trigger this action.

Properties

PropertyDescription
actionSet this to “apiAction” to use this action.
apiThe name of the ClearProcess API to be called.
dynamicParametersValues from the page that should be passed.
parametersStatic values that should be passed regardless of the content on the page.
successActionsAn array of actions to be called if the API returns no error messages.
errorActionsAn array of actions to be called if the API returns error messages.

Example

Add the following to your component:

"onClick": {
  "action": "apiAction",
  "api": "GetAttachments",
  "dynamicParameters": {
    "CUSTOMER": [
      "payload",
      "GetCustomer",
      "HEADER",
      "KUNNR"
    ]
  },
  "parameters": {
    "TYPE": "KNA1"
  },
  "successActions": [
    {
      "action": "hideModal",
      "name": "searchCustomers"
    }
  ],
  "errorActions": [
    {
      "action": "showModal",
      "name": "errorMessages"
    }
  ]
}

Another variant of apiAction, this action allows you to call a ClearProcess API based on a file uploaded by the user. Valid page components for this action are:

  • ActionButton

Properties

PropertyDescription
actionSet this to “apiFromFile” to use this action.
apiThe name of the ClearProcess API to be called.
dynamicParametersValues from the page that should be passed.
parametersStatic values that should be passed regardless of the content on the page.
successActionsAn array of actions to be called if the API returns no error messages.
errorActionsAn array of actions to be called if the API returns error messages.

Example

Add the following to your component:

"onClick": {
  "action": "apiFromFile",
  "api": "GetAttachments",
  "dynamicParameters": {
    "CUSTOMER": [
      "payload",
      "GetCustomer",
      "HEADER",
      "KUNNR"
    ]
  },
  "parameters": {
    "TYPE": "KNA1"
  },
  "successActions": [
    {
      "action": "hideModal",
      "name": "searchCustomers"
    }
  ],
  "errorActions": [
    {
      "action": "showModal",
      "name": "errorMessages"
    }
  ]
}

This allows you to call a ClearProcess API from within a ModeSwitcher using keys specified in the ModeSwitcher. Valid page components for this action are:

  • ModeSwitcher – the onSave property can be used

Properties

PropertyDescription
actionSet this to “apiFromKeys” to use this action.
apiThe name of the ClearProcess API to be called.
successActionsAn array of actions to be called if the API returns no error messages.
errorActionsAn array of actions to be called if the API returns error messages.

Example

Add the following to your component:

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

Another variant of apiAction, this action allows you to call a ClearProcess API based on a clicked hyperlink in a row of a DataTable. Valid page components for this action are:

  • DataTable – you can add an ActionLink to a column and then assign an action to the onClick property of the ActionLink

Properties

PropertyDescription
actionSet this to “apiFromRow” to use this action.
apiThe name of the ClearProcess API to be called.
columnsThe columns from the row whose values should be passed to the ClearProcess API.
successActionsAn array of actions to be called if the API returns no error messages.
errorActionsAn array of actions to be called if the API returns error messages.

Example

Add the following to your component:

"component": {
  "name": "ActionLink",
  "onClick": [
    {
      "action": "apiFromRow",
      "api": "GetFileAttachment",
      "columns": [
        "ATTA_ID"
      ],
      "successActions": [
        {
          "action": "changeMode",
          "parameters": {
            "mode": "display"
          }
        },
        {
          "name": "setIn",
           "parameters": {
              "value": {},
              "key": [
                "user_parameters"
              ]
           }
        }
      ],
      "errorActions": [
        {
          "action": "showModal",
          "name": "errorMessages"
        }
      ]
    }
  ]
}

A variant of apiAction, this action allows you to call a ClearProcess API based on rows currently selected in a DataTable. Valid page components for this action are:

  • ActionButton – use the onClick property.

Properties

PropertyDescription
actionSet this to “apiFromSelected” to use this action.
apiThe name of the ClearProcess API to be called.
nameThe name of the DataTable whose selected rows will be passed to ClearProcess.
keyThe name to be assigned to the data passed to ClearProcess.
successActionsAn array of actions to be called if the API returns no error messages.
errorActionsAn array of actions to be called if the API returns error messages.

Example

Add the following to your component:

"onClick": [
  {
    "action": "apiFromSelected",
    "api": "ApprovePurchaseOrders",
    "name": "WORKLIST".
    "key": "TO_BE_APPROVED", 
    "successActions": [
      {
        "action": "changeMode",
        "parameters": {
          "mode": "display"
        }
      },
      {
        "name": "setIn",
         "parameters": {
            "value": {},
            "key": [
              "user_parameters"
            ]
         }
      }
    ],
    "errorActions": [
      {
        "action": "showModal",
        "name": "errorMessages"
      }
    ]
  }
]

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. Valid page components for this action are:

  • ModeSwitcher – within the onSave and onCancel properties, use the successActions properties.
  • ActionButton – use the onClick property.

Properties

PropertyDescription
actionNameSet this to “changeMode” to use this action.
parametersAdditional properties for the action.
modeValid options include “create”, “edit”, and “display”.

Example

Add the following to your component:

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

This action allows you to clear the values of components in a page. The valid components that can be cleared are inputs, datePickers, timePickers, textAreas dataTables, and checkboxes. Valid page components for this action are:

  • ModeSwitcher – use the onCreate property.
  • ActionButton – use the onClick property.
  • Input – use the onBlur property.

Properties

PropertyDescription
actionSet this to “clear” to use this action.
inputsA list of inputs to be cleared.
textAreasA list of text areas to be cleared.
datePickersA list of date pickers to be cleared.
timePickersA list of time pickers to be cleared.
dataTablesA list of data tables to be cleared.
checkboxesA list of checkboxes to be cleared

Example

Add the following to your component:

{
  "actionName": "clear",
  "inputs": [
    "CUSTOMER",
    "SHIP_TO"
  ],
  "textAreas": [
    "SHIPPING_NOTES"
  ],
  "datePickers": [
    "REQUESTED_DELIVERY"
  ],
  "timePickers": [
    "DELIVERY_TIME"
  ],
  "dataTables": [
    "ITEMS",
    "PARTIES"
  ]
}

This action allows you to clear all data in a page. Valid page components for this action are:

  • ModeSwitcher – use the onCreate property.
  • ActionButton – use the onClick property.

Properties

PropertyDescription
actionSet this to “clearAll” to use this action.

Example

Add the following to your component:

{
  "actionName": "clearAll"
}

This action allows you to download the layout of a DataTable as a CSV template. You can use this template to fill data in the CSV file and then upload data back into the DataTable. Valid page components for this action are:

  • ActionButton – use the onClick property.

Properties

PropertyDescription
actionSet this to “downloadCSVTemplate” to use this action.
nameThe name of the DataTable whose layout will be downloaded.

Example

Add the following to your component:

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

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. Valid page components for this action are:

  • ActionButton – use the onClick property.

Properties

PropertyDescription
actionSet this to “downloadSelectedAsCSV” to use this action.
nameThe name of the DataTable whose content will be downloaded.

Example

Add the following to your component:

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

This action allows you to duplicate 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. Valid page components for this action are:

  • ActionButton – use the onClick property.

Properties

PropertyDescription
actionNameSet this to “duplicateSelected” to use this action.
nameThe name of the DataTable whose content will be downloaded.

Example

Add the following to your component:

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

This action allows you to extract selected rows of a DataTable to another dataset. For example, you have a list of open receivables to be paid, but you only want to select a subset of the receivables and pay them. This action typically precedes the showModal action, which allows you to see the extracted dataset in another view. Valid page components for this action are:

  • ActionButton – use the onClick property.

Properties

PropertyDescription
actionSet this to “extractSelected” to use this action.
nameThe name of the DataTable whose selected rows will be extracted.
toThe name of the new dataset in the Redux data store.

Example

Add the following to your component:

"onClick": {
  "actionName": "extractSelected", 
  "name": "ITEMS", 
  "to": "ITEMS_TO_BE_PAID"
}

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. Valid page components for this action are:

  • ActionButton – use the onClick property.

Properties

PropertyDescription
actionSet this to “hideModal” to use this action.
nameThe name of the modal to be closed.

Example

Add the following to your component:

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

This action allows you to open a URL. Typically the URL is returned as the result of a ClearProcess API call and thus openUrl appears in the successActions. Valid page components for this action are:

  • ActionButton – use the onClick property.

Properties

PropertyDescription
nameSet this to “openUrl” to use this action.
urlThe URL to be opened. This refers to a location in the Redux data store.
newTabSet this to true if you want the URL opened in another browser tab.

Example

Add the following to your component:

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

This allows you to refresh the ClearWork page in your browser. This is the equivalent of clicking your browser’s refresh button or pressing the F5 button (PC) or Command+R (Mac). This is useful when you’ve made many changes to a record that you would like to discard and retrieve the original record. Valid page components for this action are:

  • ModeSwitcher – the onCancel propertied can be used.
  • ActionButton – the onClick property can be used.

Properties

PropertyDescription
actionSet this to “reloadPage” to use this action.

Example

Add the following to your component:

"onCancel": [
  {
    "action": "reloadPage"
  }
]

This allows you to scroll to the top automatically if your page is very long. Valid page components for this action are:

  • ModeSwitcher – the onCreate and onCancel propertied can be used.
  • ActionButton – the onClick property can be used.

Properties

PropertyDescription
actionSet this to “scrollToTop” to use this action.

Example

Add the following to your component:

"onClick": [
  {
    "action": "scrollToTop"
  }
]

This allows you to initialize data in the Redux data store. This is useful when you want to clear out previous search results or any time you want a prior ClearProcess API call’s results to be erased. Valid page components for this action are:

  • ModeSwitcher – the onCreate and onCancel propertied can be used.
  • ActionButton – the onClick property can be used.
  • RpcForm – the submitActions property can be used.

Properties

PropertyDescription
nameSet this to “setIn” to use this action.
valueThe value to be set.
keyThe dataset in the Redux data store to be initialized.

Example

Add the following to your component:

"onCreate": {
  "name": "setIn",
  "parameters": {
     "value": {},
     "key": [
       "user_parameters"
     ]
  }
}

This action allows you to open a modal. Valid page components for this action are:

  • ActionButton – use the onClick property.
  • Input – use the onSearch or onBlur properties.

Properties

PropertyDescription
actionSet this to “showModal” to use this action.
nameThe name of the modal to be opened.

Example

Add the following to your component:

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

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 ClearProcess API call.  Valid page components for this action are:

  • ActionButton – use the onClick property.

Properties

PropertyDescription
actionSet this to “toggleAll” to use this action.
nameThe name of the DataTable.

Example

Add the following to your component:

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

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. Valid page components for this action are:

  • ActionButton – use the onClick property.
  • Input – use the onBlur property.

Properties

PropertyDescription
actionSet this to “updateDefaultValue” to use this action.
nameThe name of the DataTable whose column will be updated.
columnThe name of the column in the DataTable whose value will be updated.

Example

Add the following to your component:

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

When any page in ClearWork is loaded, a ClearProcess API named GetDefaultFields is called. If any of the fields in the response match input names on the page, the default value for those inputs is automatically set. This action allows you to override those default user fields. This is useful when a process has specific rules about default values being overridden, such as a Customer’s default shipping location should override the user’s default shipping location. Valid page components for this action are:

  • ActionButton – use the onClick property.
  • Page – use the willMountActions property.
  • ModeSwitcher – use the onCreate property.

Properties

PropertyDescription
actionSet this to “updateDefaultFields” to use this action.
sourceThe location in the Redux data store where the default fields are stored.
fieldsThe inputs whose default values should be updated.

Example

Add the following to your component:

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

This action allows you to update the default value of a table column. This action will reference the default field values currently set in the user’s session. You can use this in conjunction with the updateDefaultFields action. Valid page components for this action are:

  • ActionButton – use the onClick property.
  • Input – use the onBlur property.

Properties

PropertyDescription
actionSet this to “updateDefaultValue” to use this action.
nameThe name of the DataTable whose column will be updated.
columnThe name of the column in the DataTable whose value will be updated.

Example

Add the following to your component:

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