Customize ThingWorx Navigate > Create Custom Tasks > Use ThingWorx Navigate Components in a Custom Task > Available Components > Action Bar (BETA)
Action Bar (BETA)
Definition and Usage
The Action Bar component is a widget that displays a range of actions available to the user. The actions appear as a row of buttons and in an accompanying list box. The component configuration and the size of the user’s screen determine the number of actions that appear as buttons. Any actions that do not appear as buttons are visible in the list box. The list box is replaced with the ellipses action beginning ThingWorx Navigate 9.3.4.
The following is a sample image showing the Action Bar component:
You can configure the Action Bar component in the following ways:
• Define the actions that are included in the Action Bar
• Set the maximum number of actions to show as buttons
• Set visibility options for the actions depending on their availability
• Define the order of the actions
• Define whether inputs are required for an action
• Select the desired style for the Action Bar
Actions are designed to activate either a service or a popup. The service or the popup mashup must be configured separately in ThingWorx. Any additional features, such as toast messages, must be configured in the appropriate service or mashup in ThingWorx. From ThingWorx Navigate 9.3.4 and later versions, you can also configure opening a URL from the action bar; for instance, configuring the View in Windchill button.
An Action Bar can be included inside the Item List and Item Identity components. Beginning ThingWorx Navigate 9.3.4, an action bar is also included inside the preview pane of the View Parts List, View Part Structure, and View Document Structure tasks. The preview pane replaces the selected doc/part pane, present on the top right corner of the given task.
Action Bar, Part Action Bar, and Document Action Bar are the configuration types available for the Action Bar component. The following table lists the actions available for each of these configurations:
Configuration Type
Default Actions
Action Bar
Approve, Reject, Analyze, and Reassign
Part Action Bar
Report a Problem and View in Windchill
Document Action Bar
Open Document, Report a Problem, and View in Windchill
Binding Properties 
Input
Property Name
Description
Property Type
Disabled
Disables the widget in the mashup.
Boolean
Input
Used for identifying the data to be fetched from the backend system.
JSON in CCO format
ServiceActionId
When the action is clicked, this string is updated with the action ID of a service action.
String
SubComponentConfiguration
Bind the configuration to this property if it changes in the runtime.
JSON
Output
Property Name
Description
Property Type
EventTriggered
Event that is triggered when a service finishes running or a popup is displayed, if the action is configured with thefireEventOnFinish configuration property as true.
Event
ServiceActionIdChanged
Event that is triggered when the value in ServiceActionId is changed, meaning that a service invoked by the Action Bar has finished running.
Event
PopupClosed
Event that is triggered when a popup that was opened is closed.
Event
Configuration Properties 
The following tables show the JSON properties used to configure this component.
For more information on the structure of the configuration, see Component Configuration Structure.
For more information on subproperties, see Sub-Properties and Container Keys.
Property Name
Description
Property Type
Default Value
Required or Optional
maxItemsToShow
The maximum number of action buttons that are shown. If there are more action buttons than the value specified, additional actions will be populated in the list box.
2
Required
modelThingName
The name of a Thing that contains a service with the following signature:
public JSONObject GetActions(@ThingworxServiceParameter(name = "ccoJson", baseType = "JSON") JSONObject ccoJson)
This service takes input in CCO format containing a single item. It then returns a JSONObject containing an array that maps the ID of an available action to its label as received from the back-end. See example in Sample JSON Configuration below.
PTC.ActionBar Model.Thing
Required
actions
The list of actions for which data needs to be fetched from the backend system. Container key is actionConfiguration. See sub-properties below:
N/A
Required
overrideLabel
The value set here is shown as the action button’s label, overriding the value that comes from the backend system. To localize, put double brackets around the value.
N/A
Optional
actionButtonVisibility
Determines under what conditions the action buttons are shown, and in what state. Options: AlwaysShown, DisableUnavailable, HideUnavailable. For AlwaysShown, button is always visible and enabled. For DisableUnavailable, button is always visible, but disabled when action is unavailable for given selection. For HideUnavailable, button is only visible when action is available for the given selection.
Note: There are other configurations that affect whether a button is enabled or disabled.
N/A
Required
buttonStyle
Determines the visual style of the button. Options: primary, secondary, tertiary, danger, transparent.
N/A
Required
overrideSetDisabled
If this field is set, then its value is the only factor in determining if a button should be enabled or disabled. Options: true, false. True ensures that the button is disabled, and false ensures that the button is enabled.
N/A
Optional
fireEventOnFinish
If this field is set to true, when a service finishes running, the event EventTriggered is triggered, and when a popup is closed, the event PopupClosed is triggered.
N/A
Optional
inputConstraints
Determines the input constraint for the action. Options: InputRequired, SingleInputOnly, and NoInputRequired.
InputRequired: This action must receive input to operate. If the input is empty and doesn't contain any items, this action's button is disabled.
SingleInputOnly: This action must receive a single input in order to operate. If the input is empty or contains more than a single item, this action's button is disabled.
NoInputRequired: This action can operate without any input, or with input.
N/A
Optional
iconWhenEnabled
If this field is specified, the action's button contains an icon to the left of the label when the action button is enabled.
entityName
The name of the media entity to use as an icon.
iconWhenDisabled
If this field is specified, the action's button contains an icon to the left of the label when the action button is disabled.
entityName
The name of the media entity to use as an icon.
activityType
Determines whether the action runs a service or displays a popup mashup. Options: openUrl (available in ThingWorx Navigate 9.3.4 and later versions), popup, service. See the tables below for the required sub-properties for popup and for service.
N/A
Required
mashupName
The name of the mashup that appears as a popup.
This property is used only when activityType is set to popup.
N/A
Required
redirectAfterPopupSuccess
Redirects to another mashup when the popup is closed after a successful operation.
To inform the Action Bar whether the operation performed by the popup was completed successfully, set the session parameter named PTC.ActionBar.popupCloseParameters to indicate success or failure. For example, in the popup mashup there can be an expression that is executed after the operation performed by the popup finishes, and in that expression the session parameter is set. In the following example, the JSON attribute operationSuccessful is set to true since the operation was successful:
sessionStorage.setItem("PTC.ActionBar.popupCloseParameters", JSON.stringify( { operationSuccessful: true } ));
This property is used only when activityType is set to popup.
N/A
Optional
popupWidth
Specifies the width of the popup that appears.
This property is used only when activityType is set to popup.
1024
Optional
popupHeight
Specifies the width of the popup that appears.
This property is used only when activityType is set to popup.
640
Optional
thingWithService
The name of the Thing that contains the service to run.
This property is used only when activityType is set to service.
N/A
Required
serviceName
The name of the service to run.
This property is used only when activityType is set to service.
N/A
Required
parameters
This optional field allows us to pass hard-coded parameters to a service or a popup mashup. The parameters are defined in a JSONObject must be formatted as a string of a JSON object, with escaped-quotations. Parameters should be input into the configuration file in the form "{\"myParamName\": \"hardcodedValue\"}" . See additional information below.
This property is used only when activityType is set to service or popup.
N/A
Optional
openUrl
* 
This property is only available in ThingWorx Navigate 9.3.4 and later versions.
Allows setting a URL on the action button. When set to a valid value, a new window or tab opens with set URL on selecting the action button.
This property is used only when activityType is set to openUrl.
N/A
Optional
Using parameters to Configure a Service Action:
This is the signature of an example service named MyService:
@ThingworxServiceDefinition(name = "MyService", category = "MyCategory")

public void MyService(
@ThingworxServiceParameter(name = "exampleInt", baseType = "INTEGER") Integer exampleInt,
@ThingworxServiceParameter(name = "ExampleString", baseType = "STRING") String exampleString,
@ThingworxServiceParameter(name = "ExampleBoolean", baseType = "BOOLEAN") Boolean exampleBoolean)
This is what the parameter values look like for MyService:
{
\"exampleInt\": 123,
\"exampleString\": \"Hello\",
\"exampleBoolean\": true
}
* 
There are two parameters that your service gets automatically, if you define the service signature to receive them: serviceParam_InputCco and serviceParam_ActionId. The parameter serviceParam_InputCco is a JSONObject, and is the input that was provided to the Action Bar. The parameter serviceParam_ActionId is a string that contains the ID of the action that was clicked. If your service doesn't include these parameters in its signature, you cannot use them. If you would like to use them, define your service signature to use either or both of them, using the following:
@ThingworxServiceDefinition(name = "MyService", category = "MyCategory")

public void MyService(
@ThingworxServiceParameter(name = "serviceParam_InputCco", baseType = "JSON")
JSONObject serviceParam_InputCco,
@ThingworxServiceParameter(name = "serviceParam_ActionId", baseType = "STRING")
String serviceParam_ActionId)
Sample Configuration 
• ThingWorx Navigate 9.3.4 and later versions
{
"maxItemsToShow": {
"value": 3
},
"modelThingName": {
"entityName": "PTC.ActionBarModel.Thing"
},
"actions": {
"selectedValues": {
"data": [{
"itemListsData": [{
"items": [{
"id": "Approve",
"additionalData": {
"actionConfiguration": {
"actionButtonVisibility": {
"selectedKey": "HideUnavailable"
},
"buttonStyle": {
"selectedKey": "primary"
},
"activityType": {
"selectedKey": "popup"
},
"mashupName": {
"mashupName": "PTC.AccessApp.WindchillServices.RoutingOptionMashup"
},
"fireEventOnFinish": {
"value": false
},
"inputConstraints": {
"selectedKey": "SingleInputOnly"
}
}
},
"ordinal": 10
}, {
"id": "Reassign",
"additionalData": {
"actionConfiguration": {
"overrideLabel": {
"value": "Reassign"
},
"actionButtonVisibility": {
"selectedKey": "AlwaysShown"
},
"buttonStyle": {
"selectedKey": "primary"
},
"activityType": {
"selectedKey": "popup"
},
"mashupName": {
"mashupName": "PTC.AccessApp.WindchillServices.ReassignActionMashup"
},
"fireEventOnFinish": {
"value": false
},
"inputConstraints": {
"selectedKey": "InputRequired"
}
}
},
"ordinal": 20
}, {
"id": "OpenDocument",
"additionalData": {
"actionConfiguration": {
"openUrl": {
"value": "https://www.ptc.com"
},
"overrideLabel": {
"selectedKey": "[[PTC.AccessApp.OpenDocument]]"
},
"buttonStyle": {
"selectedKey": "primary"
},
"activityType": {
"selectedKey": "openUrl"
},
"actionButtonVisibility": {
"selectedKey": "AlwaysShown"
}
},
"ordinal": 30
}
}, {
"id": "ProblemReport",
"additionalData": {
"actionConfiguration": {
"overrideLabel": {
"value": "[[PTC.Nav.CreateProblemReport.AppTitle]]"
},
"popupHeight": {
"value": 640
},
"popupWidth": {
"value": 800
},
"actionButtonVisibility": {
"selectedKey": "AlwaysShown"
},
"buttonStyle": {
"selectedKey": "primary"
},
"mashupName": {
"mashupName": "PTC.Nav.CreateProblemReportAppMashup"
},
"activityType": {
"selectedKey": "popup"
},
"parameters": {
"value": "{\"affectedItemsCCO\":{\"timeStamp\":\"2021-11-24 22:45:54.528\",\"data\":[{\"itemListsData\":[{\"items\":[{\"id\":{\"value\":\"OR:wt.part.WTPart:100447\"}}],\"objectType\":\"PTC.ProdMgmt.Part\"}],\"adapter\":{\"instanceName\":\"windchill\",\"thingName\":\"PTC.WCAdapter\"}}],\"version\":\"1.0.0\",\"statusMessage\":\"OK\",\"status\":\"200\"},\"isPopup\":true}"
}
}
},
"ordinal": 40
}
],
"objectType": "WT.WorkItem.Actions"
}
],
"adapter": {
"instanceName": "windchill",
"thingName": "PTC.WCAdapter"
}
}
]
}
}
}
• ThingWorx Navigate 9.3.0 and previous versions
{
"maxItemsToShow":{
"value":3
},
"modelThingName":{
"entityName":"PTC.ActionBarModel.Thing"
},
"actions":{
"selectedValues":{
"data":[
{
"itemListsData":[
{
"items":[
{
"id":"Approve",
"additionalData":{
"actionConfiguration":{
"overrideLabel":{
"value":""
},
"actionButtonVisibility":{
"selectedKey":"HideUnavailable"
},
"buttonStyle":{
"selectedKey":"primary"
},
"activityType":{
"selectedKey":"popup"
},
"mashupName":{
"mashupName":"PTC.AccessApp.WindchillServices.RoutingOptionMashup"
},
"fireEventOnFinish":{
"value":false
},
"inputConstraints":{
"selectedKey":"SingleInputOnly"
}
}
},
"ordinal":1
},
{
"id":"Reject",
"additionalData":{
"actionConfiguration":{
"overrideLabel":{
"value":""
},
"actionButtonVisibility":{
"selectedKey":"HideUnavailable"
},
"buttonStyle":{
"selectedKey":"primary"
},
"activityType":{
"selectedKey":"popup"
},
"mashupName":{
"mashupName":"PTC.AccessApp.WindchillServices.RoutingOptionMashup"
},
"fireEventOnFinish":{
"value":false
},
"inputConstraints":{
"selectedKey":"SingleInputOnly"
}
}
},
"ordinal":2
},
{
"id":"Analyze",
"additionalData":{
"actionConfiguration":{
"overrideLabel":{
"value":""
},
"actionButtonVisibility":{
"selectedKey":"HideUnavailable"
},
"buttonStyle":{
"selectedKey":"primary"
},
"activityType":{
"selectedKey":"popup"
},
"mashupName":{
"mashupName":"PTC.AccessApp.WindchillServices.RoutingOptionMashup"
},
"fireEventOnFinish":{
"value":false
},
"inputConstraints":{
"selectedKey":"SingleInputOnly"
}
}
},
"ordinal":3
},
{
"id":"Reassign",
"additionalData":{
"actionConfiguration":{
"overrideLabel":{
"value":"Reassign"
},
"actionButtonVisibility":{
"selectedKey":"AlwaysShown"
},
"buttonStyle":{
"selectedKey":"primary"
},
"activityType":{
"selectedKey":"popup"
},
"mashupName":{
"mashupName":"PTC.AccessApp.WindchillServices.ReassignActionMashup"
},
"fireEventOnFinish":{
"value":false
},
"inputConstraints":{
"selectedKey":"InputRequired"
}
}
},
"ordinal":4
}
],
"objectType":"WT.WorkItem.Actions"
}
],
"adapter":{
"instanceName":"windchill",
"thingName":"PTC.WCAdapter"
}
}
]
}
}
}
Was this helpful?