Implementation of controls in DX API
DX API v1 supports a range of controls. Learn about the structure of the controls to successfully implement them in your application.
You can use the following controls through DX API:
Autocomplete control in DX API
The Autocomplete control (pxAutoComplete)
helps users conveniently enter appropriate values by suggesting matches from a drop-down
list when the user starts typing. Learn about the JSON structure and elements of a sample
Autocomplete control, to understand how you can integrate it into
your custom application.
The following JSON code is a sample API response for the Autocomplete control:
{
"validationMessages": "",
"visible": true,
"labelReserveSpace": true,
"readOnly": false,
"control": {
"modes": [
{
"groupOrder": "asc",
"displayFullScreen": true,
"tooltip": "",
"enableGrouping": true,
"groupBy": "",
"minChars": "",
"minSearch": "",
"dataPageValue": "pyID",
"maxResults": "",
"loadMode": "auto",
"options": [
{
"value": "",
"key": "N-7001"
},
{
"value": "",
"key": "N-7002"
},
{
"value": "",
"key": "N-8004"
},
{
"value": "",
"key": "N-8006"
},
{
"value": "",
"key": "N-8007"
},
{
"value": "",
"key": "N-8008"
},
{
"value": "",
"key": "N-9001"
},
{
"value": "",
"key": "N-11001"
},
{
"value": "",
"key": "N-11002"
},
{
"value": "",
"key": "N-11003"
},
{
"value": "",
"key": "N-15001"
},
{
"value": "",
"key": "N-15002"
},
{
"value": "",
"key": "N-17001"
},
{
"value": "",
"key": "N-17002"
},
{
"value": "",
"key": "N-17003"
}
],
"dataPageID": "D_Cases",
"maxChars": "",
"formatType": "text",
"obfuscated": false,
"dataPagePrompt": "pyCreatorID",
"allowFreeFormInput": true,
"displayAsComboBox": false,
"listSource": "datapage",
"textAlign": "Left",
"dataPageParams": [],
"modeType": "editable",
"lightWeightAutoComplete": false,
"controlFormat": "",
"dataPageTooltip": "pyEffortActual",
"specifySize": "auto"
},
{
"modeType": "readOnly",
"autoPrepend": "",
"tooltip": "",
"showReadOnlyValidation": "false",
"autoAppend": "",
"formatType": "text",
"obfuscated": false
}
],
"actionSets": [],
"type": "pxAutoComplete"
},
"label": "Autocomplete",
"type": "Text",
"required": false,
"validateAs": "",
"reference": "pyTemplateAutoComplete",
"labelFormat": "Standard",
"disabled": false,
"testID": "202008131029460573631",
"value": "",
"maxLength": 0,
"expectedLength": "",
"fieldID": "pyTemplateAutoComplete"
}The following examples show a sample configuration of the control with the relevant JSON elements:
- The three properties in the example are part of
control.modes[0]as the following key-value pairs:- dataPageValue: pyID
- dataPagePrompt: pyCreatorID
- dataPageTooltip: pyEffortActual
(Any property beyond the first three is not part of the JSON response.)
- DX API supports all list sources except for report definitions. If the list
source is a data page, the following values are included in the response:
- dataPageID
- The ID of the data page. To obtain the values for the list, call the
GET/data/{datapageID}endpoint. - dataPageValue
- The key of the value selected from the list of values in the data page.
- dataPagePrompt
- The visible label of the value selected from the list of values in the data page.
See the following example of a data page as the list source:
"control": { "modes": [{ "dataPagePrompt": "TeamName", "dataPageValue": "TeamName", "listSource": "datapage", "dataPageID": "D_GetTeams" }], "type": "pxAutocomplete" }
The response returns the name-value pairs that you add to the DX API attributes of
the control as part of the customAttributes element.
The message in the validationMessages element is displayed when the
validation in the validateAs element fails.
The response returns the value of the Edit options field as a
boolean readOnly element. The read-only value is part of the value
key in the JSON response.
Button control in DX API
The Button control (pxButton) helps users trigger actions in their applications. Learn about the JSON structure and elements of a sample Button control, to understand how you can integrate the element into your custom application.
The following JSON code is a sample API response for the Button control:
{
"view":{
"reference":"",
"validationMessages":"",
"viewID":"GetInfo",
"visible":true,
"name":"Get info",
"appliesTo":"OU1F1E-CodeNinjas-Work-NoCase",
"groups":[
{
"layout":{
"visible":true,
"titleFormat":"h2",
"containerFormat":"NOHEADER",
"groups":[
{
"field":{
"validationMessages":"",
"visible":true,
"labelReserveSpace":true,
"readOnly":false,
"control":{
"modes":[
{
"modeType":"ignore",
"tooltip":""
},
{
"modeType":"readOnly",
"autoPrepend":"",
"controlFormat":"Simple",
"tooltip":"Add a condition",
"showReadOnlyValidation":"false",
"autoAppend":"",
"formatType":"text"
}
],
"actionSets":[
],
"label":"Submit",
"type":"pxButton"
},
"label":"Button caption",
"type":"Text",
"showLabel":true,
"required":false,
"validateAs":"",
"reference":"pyTemplateButton",
"labelFormat":"Announcement",
"disabled":false,
"testID":"202008120745330125290",
"value":"",
"maxLength":0,
"expectedLength":"",
"fieldID":"pyTemplateButton",
"customAttributes":{
"AttributeName":"AttributeValue"
}
}
}
],
"groupFormat":"Stacked",
"layoutFormat":"SIMPLELAYOUT",
"title":""
}
}
]
},
"caseID":"OU1F1E-CODENINJAS-WORK N-123002",
"name":"Get info",
"actionID":"GetInfo"
}The following examples show a sample configuration of the control with the relevant JSON elements:
The JSON response does not contain the data for the Privilege, When not met, and Tour ID fields.
- The JSON response does not contain the data for the Set as Floating Action Button (FAB) check box.
- For the Control format field, the value for the
Standard option that is returned in the response
is
pzhc. The remaining options are returned as they are displayed in the UI. For example, the value for the Simple option remainsSimple.
Checkbox control in DX API
The Checkbox control (pxCheckbox) helps users
conveniently enter appropriate values by suggesting matches from a drop-down list when the
user starts typing. Learn about the JSON structure and elements of a sample
Checkbox control, to understand how you can integrate it into
your custom application.
The following JSON code is a sample API response for the Checkbox control:
{
"validationMessages": "",
"visible": true,
"labelReserveSpace": true,
"readOnly": false,
"control": {
"modes": [
{
"captionPosition": "right",
"modeType": "editable",
"controlFormat": "Standard",
"textAlign": "Left",
"tooltip": "checkbox hover",
"maxChars": "",
"formatType": "text",
"specifySize": "auto",
"obfuscated": false,
"minChars": ""
},
{
"trueLabel": "True",
"modeType": "readOnly",
"falseLabel": "False",
"falseImage": "",
"showValueAs": "text",
"tooltip": "",
"showReadOnlyValidation": "true",
"formatType": "truefalse",
"obfuscated": false,
"trueImage": ""
}
],
"actionSets": [
{
"actions": [
{
"action": "refresh",
"refreshFor": "VGVzdA%3D%3D"
}
],
"events": [
{
"event": "change"
}
]
},
{
"actions": [
{
"action": "refresh",
"refreshFor": "VGVzdA%3D%3D"
},
{
"action": "postValue"
}
],
"events": [
{
"event": "focus"
},
{
"event": "click"
}
]
}
],
"label": "checkbox caption",
"type": "pxCheckbox"
},
"label": "Checkbox",
"type": "True-False",
"showLabel": true,
"required": false,
"validateAs": "",
"reference": "cbprop",
"labelFormat": "Standard",
"disabled": false,
"testID": "20200730015740046596",
"value": "true",
"maxLength": 0,
"expectedLength": "",
"fieldID": "cbprop",
"customAttributes": {
"testAttr": "testVal"
}
}The following examples show a sample configuration of the control with the relevant JSON elements:
The response returns the name-value pairs that you add to the DX API attributes of
the control as part of the customAttributes element.
The message in the validationMessages element is displayed when the
validation in the validateAs element fails.
The response returns the value of the Edit options field as a
boolean readOnly element. The read-only value is part of the value
key in the JSON response.
Currency control in DX API
The Currency control (pxCurrency) helps users select and display any type of currency in forms. Learn about the JSON structure and elements of a sample Currency control, to understand how you can integrate it into your custom application.
The following JSON code is a sample API response for the Currency control:
{
"view": {
"reference": "",
"validationMessages": "",
"viewID": "GetInfo",
"visible": true,
"name": "Get info",
"appliesTo": "OU1F1E-CodeNinjas-Work-NoCase",
"groups": [
{
"layout": {
"visible": true,
"titleFormat": "h2",
"containerFormat": "NOHEADER",
"groups": [
{
"field": {
"validationMessages": "",
"visible": true,
"labelReserveSpace": true,
"readOnly": false,
"control": {
"modes": [
{
"displayWithReadOnlyFormat": "true",
"charWidthUnits": "px",
"charWidth": "75",
"modeType": "editable",
"controlFormat": "Assignment title",
"textAlign": "Right",
"tooltip": "Add a valid currency",
"maxChars": "10",
"placeholder": "Add content",
"formatType": "number",
"specifySize": "custom",
"minChars": "3"
},
{
"currencyType": "local",
"symbolPosition": "left",
"hasSeparators": true,
"textAlign": "Right",
"tooltip": "",
"showReadOnlyValidation": "true",
"symbolValue": "",
"numberScale": "thousands",
"numberSymbol": "currency",
"roundingMethod": "",
"negativeFormat": "minusStyle",
"modeType": "readOnly",
"decimalPlaces": "2",
"negativeFormatStyle": "NegativeNumber",
"currencySymbolPosition": "default",
"formatType": "number",
"otherCurrencySymbol": "",
"obfuscated": false,
"displayCurrencyAs": "currencySymbol"
}
],
"actionSets": [],
"type": "pxCurrency"
},
"label": "Total Amount",
"type": "Decimal",
"required": true,
"validateAs": "",
"reference": "Amount",
"labelFormat": "Announcement",
"disabled": false,
"testID": "202008170245340938636",
"value": "Rupees",
"maxLength": 0,
"expectedLength": "",
"fieldID": "Amount",
"customAttributes": {
"testattrName": "testattrValue"
}
}
}
],
"groupFormat": "Stacked",
"layoutFormat": "SIMPLELAYOUT",
"title": ""
}
}
]
},
"caseID": "OU1F1E-CODENINJAS-WORK N-152001",
"name": "Get info",
"actionID": "GetInfo"
}The following examples show a sample configuration of the control with the relevant JSON elements:
The JSON response does not contain the data in the Tour ID field.
- For the Edit options field, the Read-only (expression) option is not supported.
- The JSON response does not contain the data for the Read-only value field.
Date Time control in DX API
The Date Time control (pxDateTime) helps users select the date and time in forms. Learn about the JSON structure and elements of a sample Date Time control, to understand how you can integrate the element into your custom application.
The following JSON code is a sample API response for the Date Time control:
{
"validationMessages": "",
"visible": true,
"labelReserveSpace": true,
"readOnly": false,
"control": {
"modes": [
{
"dateTime": "auto",
"showReadOnlyFormatting": false,
"allowTextEntry": true,
"useFutureDateRange": true,
"textAlign": "Left",
"tooltip": "Data & time",
"usePastDateRange": true,
"ignoreLocaleSettings": false,
"futureDateRange": "1",
"displayLongFormat": false,
"displayMode": "calendar",
"calendarNavigation": "true",
"minChars": "",
"modeType": "editable",
"controlFormat": "",
"maxChars": "",
"placeholder": "Deadline",
"formatType": "text",
"specifySize": "auto",
"obfuscated": false
"pastDateRange": "0"
},
{
"modeType": "readOnly",
"dateTimeFormat": "DateTime-Short",
"tooltip": "",
"showReadOnlyValidation": "false",
"formatType": "datetime",
"obfuscated": false,
"showAs24HourFormat": false
}
],
"actionSets": [],
"type": "pxDateTime"
},
"label": "eta",
"type": "Date",
"required": false,
"validateAs": "",
"reference": "eta",
"labelFormat": "Standard",
"disabled": false,
"testID": "202008140904060384476",
"value": "",
"maxLength": 0,
"expectedLength": "",
"fieldID": "eta",
"customAttributes": {
"testAttr": "testVal"
}
}The following examples show a sample configuration of the control with the relevant JSON elements:
The message in the validationMessages element is displayed when the
validation in the validateAs element fails.
Display text control in DX API
The Display text control (pxDisplayText) helps users understand the structure of a layout and get a general idea of what the content groupings within the layout include, and describe the content and the purpose of layout elements by including formatted text in cells and headers in a layout. Learn about the JSON structure and elements of a sample Display text control, to understand how you can integrate the element into your custom application.
The following JSON code is a sample API response for the Display text control:
{
"view": {
"reference": "",
"validationMessages": "",
"viewID": "GetInfo",
"visible": true,
"name": "Get info",
"appliesTo": "OU1F1E-CodeNinjas-Work-NoCase",
"groups": [
{
"field": {
"validationMessages": "",
"visible": true,
"labelReserveSpace": true,
"readOnly": true,
"control": {
"modes": [
{
"modeType": "ignore",
"controlFormat": "Assignment title",
"tooltip": ""
},
{
"modeType": "readOnly",
"controlFormat": "Assignment title",
"tooltip": "",
"showReadOnlyValidation": "false",
"formatType": "advancedtext"
}
],
"actionSets": [],
"type": "pxDisplayText"
},
"label": "Text Label",
"type": "Text",
"required": false,
"validateAs": "",
"reference": "Name",
"labelFormat": "Announcement",
"disabled": false,
"testID": "20200812123901049697",
"value": "testConstant",
"maxLength": 256,
"expectedLength": "",
"fieldID": "Name"
}
}
]
},
"caseID": "OU1F1E-CODENINJAS-WORK N-123002",
"name": "Get info",
"actionID": "GetInfo"
}The following examples show a sample configuration of the control with the relevant JSON elements:
Dropdown control in DX API
The Dropdown control (pxDropdown) helps you display a list of options, from which a user can select a single option. Learn about the JSON structure and elements of a sample Dropdown control, to understand how you can integrate the element into your custom application.
The following JSON code is a sample API response for the Dropdown control:
{
"validationMessages": "",
"visible": true,
"labelReserveSpace": true,
"readOnly": false,
"control": {
"modes": [
{
"charWidthUnits": "px",
"charWidth": "170",
"dataPagePrompt": "pyLocalizedValue",
"groupOrder": "asc",
"listSource": "datapage",
"textAlign": "Left",
"tooltip": "",
"enableGrouping": false,
"groupBy": "",
"minChars": "",
"dataPageParams": [
{
"name": "startsWith",
"value": "E"
}
],
"modeType": "editable",
"dataPageValue": "pyFieldValue",
"controlFormat": "Standard",
"dataPageTooltip": "",
"loadMode": "auto",
"options": [
{
"value": "Ecuador",
"key": "ECU"
},
{
"value": "Egypt",
"key": "EGY"
},
{
"value": "Eritrea",
"key": "ERI"
},
{
"value": "Estonia",
"key": "EST"
},
{
"value": "Ethiopia",
"key": "ETH"
},
{
"value": "Spain",
"key": "ESP"
},
{
"value": "Western Sahara",
"key": "ESH"
}
],
"dataPageID": "D_GetCountryCodesFiltered",
"maxChars": "",
"placeholder": "Select",
"formatType": "none",
"specifySize": "auto"
},
{
"modeType": "readOnly",
"autoPrepend": "",
"tooltip": "",
"showReadOnlyValidation": "true",
"autoAppend": "",
"formatType": "text",
"obfuscated": false
}
],
"actionSets": [],
"type": "pxDropdown"
},
"label": "DropDownDPageParam",
"type": "Text",
"required": false,
"validateAs": "",
"reference": "DropDownDPageParam",
"labelFormat": "Standard",
"disabled": false,
"testID": "20190828130020010900e88dcf-3937-4e81-8750-8db91e8f526b233",
"value": "",
"maxLength": 256,
"expectedLength": "",
"fieldID": "DropDownDPageParam",
"customAttributes": {
"key1": "val1"
}
}The following examples show a sample configuration of the control with the relevant JSON elements:
The values in the Dropdown control are represented by the
control.modes[0].options: array element.
The response returns the name-value pairs that you add to the DX API attributes of
the control as part of the customAttributes element.
The message in the validationMessages element is displayed when the
validation in the validateAs element fails.
The response returns the value of the Edit options field as a
boolean readOnly element. The read-only value is part of the value
key in the JSON response.
Hidden text control in DX API
The Hidden text control (pxHidden) is a programming tool that helps you submit information to the server in the form of a control that is not displayed in the UI. The control helps developers manage data updates in certain scenarios and initiate declarative triggers. Learn about the JSON structure and elements of a sample Hidden text control, to understand how you can integrate it into your custom application.
The following JSON code is a sample API response for the Hidden text control:
{
"validationMessages": "",
"visible": true,
"labelReserveSpace": false,
"readOnly": false,
"control": {
"modes": [
{
"modeType": "ignore",
"tooltip": ""
},
{
"modeType": "readOnly",
"autoPrepend": "",
"tooltip": "",
"autoAppend": "",
"formatType": "text",
"obfuscated": false
}
],
"actionSets": [
{
"actions": [
{
"action": "refresh",
"refreshFor": "VGVzdA%3D%3D"
}
],
"events": [
{
"event": "change"
}
]
},
{
"actions": [
{
"action": "refresh",
"refreshFor": "VGVzdA%3D%3D"
},
{
"action": "postValue"
}
],
"events": [
{
"event": "focus"
},
{
"event": "click"
}
]
}
],
"type": "pxHidden"
},
"label": "",
"type": "Text",
"required": false,
"validateAs": "",
"reference": "HiddenInput",
"labelFormat": "Standard",
"disabled": false,
"testID": "2019020815533305284e1e7006-23da-4b81-8a44-8ea60cd81fa3911",
"value": "",
"maxLength": 256,
"expectedLength": "",
"fieldID": "HiddenInput"
}The following examples show a sample configuration of the control with the relevant JSON elements:
The response returns the name-value pairs that you add to the DX API attributes of
the control as part of the customAttributes element.
The message in the validationMessages element is displayed when the
validation in the validateAs element fails.
Image control in DX API
The Image control (pxIcon) helps you insert images in forms. Learn about the JSON structure and elements of a sample Image control, to understand how you can integrate the element into your custom application.
The following JSON code is a sample API response for the Image control:
{
"validationMessages": "",
"visible": true,
"labelReserveSpace": true,
"readOnly": false,
"control": {
"modes": [
{
"modeType": "ignore",
"tooltip": "",
"iconProperty": ".Name",
"iconSource": "property"
},
{
"modeType": "readOnly",
"autoPrepend": "",
"controlFormat": "Standard",
"tooltip": "",
"showReadOnlyValidation": "false",
"autoAppend": "",
"iconProperty": ".Name",
"formatType": "text",
"iconSource": "property"
}
],
"actionSets": [
{
"actions": [
{
"action": "refresh",
"refreshFor": "VGVzdA%3D%3D"
}
],
"events": [
{
"event": "change"
}
]
},
{
"actions": [
{
"action": "refresh",
"refreshFor": "VGVzdA%3D%3D"
},
{
"action": "postValue"
}
],
"events": [
{
"event": "focus"
},
{
"event": "click"
}
]
}
],
"type": "pxIcon"
},
"label": "Image",
"type": "Text",
"showLabel": true,
"required": false,
"validateAs": "",
"reference": "pyTemplateGeneric",
"labelFormat": "Standard",
"disabled": false,
"testID": "202008260747570122763",
"value": "",
"maxLength": 0,
"expectedLength": "",
"fieldID": "pyTemplateGeneric"
}The following examples show a sample configuration of the control with the relevant JSON elements:
The response returns the name-value pairs that you add to the DX API attributes of
the control as part of the customAttributes element.
The message in the validationMessages element is displayed when the
validation in the validateAs element fails.
Integer control in DX API
The Integer control (pxInteger) helps users enter whole numbers (integers) in their forms. Learn about the JSON structure and elements of a sample Integer control, to understand how you can integrate it into your custom application.
The following JSON code is a sample API response for the Integer control:
{
"validationMessages": "",
"visible": true,
"labelReserveSpace": true,
"readOnly": false,
"control": {
"modes": [
{
"displayWithReadOnlyFormat": "true",
"modeType": "editable",
"controlFormat": "Standard",
"textAlign": "Right",
"tooltip": "Valid year can't be greater than 2020",
"maxChars": "4",
"placeholder": "Enter a valid year",
"formatType": "number",
"specifySize": "auto",
"minChars": "4"
},
{
"currencyType": "local",
"symbolPosition": "left",
"hasSeparators": true,
"textAlign": "Right",
"tooltip": "",
"showReadOnlyValidation": "false",
"numberScale": "none",
"numberSymbol": "none",
"roundingMethod": "",
"negativeFormat": "minusStyle",
"modeType": "readOnly",
"decimalPlaces": "0",
"negativeFormatStyle": "NegativeNumber",
"currencySymbolPosition": "left",
"formatType": "number",
"otherCurrencySymbol": "",
"obfuscated": false,
"displayCurrencyAs": "currencySymbol"
}
],
"actionSets": [],
"type": "pxInteger"
},
"label": "Year",
"type": "Integer",
"required": false,
"validateAs": "",
"reference": "year",
"labelFormat": "Standard",
"disabled": false,
"testID": "202008140904060384476",
"value": "2020",
"maxLength": 0,
"expectedLength": "",
"fieldID": "year",
"customAttributes": {
"testAttr": "testVal"
}
}The following examples show a sample configuration of the control with the relevant JSON elements:
The response returns the name-value pairs that you add to the DX API attributes of
the control as part of the customAttributes element.
The message in the validationMessages element is displayed when the
validation in the validateAs element fails.
The response returns the value of the Edit options field as a boolean readOnly element. The read-only value is part of the value key in the JSON response.
Label control in DX API
The Label control helps users enter formatted text, such as the results of JSP tags or directives in layout cells and headers, limited to 64 characters. Learn about the JSON structure and elements of a sample Label control, to understand how you can integrate it into your custom application.
The following JSON code is a sample API response for the Label control:
{
"caption": {
"columnImportance": "",
"captionFor": "",
"control": {
"format": "Standard",
"testID": "123"
},
"value": "sample text"
}
}The following examples show a sample configuration of the control with the relevant JSON elements:
Link control in DX API
The Link control (pxLink) helps users to open a new application view or to move the cursor to a new position on the current view. Learn about the JSON structure and elements of a sample Link control, to understand how you can integrate the element into your custom application.
The following JSON code is a sample API response for the Link control:
{
"view": {
"reference": "",
"validationMessages": "",
"viewID": "GetInfo",
"visible": true,
"name": "Get info",
"appliesTo": "OU1F1E-CodeNinjas-Work-NoCase",
"groups": [
{
"layout": {
"visible": true,
"titleFormat": "h2",
"containerFormat": "NOHEADER",
"groups": [
{
"field": {
"validationMessages": "",
"visible": true,
"labelReserveSpace": true,
"readOnly": false,
"control": {
"modes": [
{
"linkStyle": "pi pi-inbox-empty pi-empty-state",
"linkData": "Email Value",
"modeType": "ignore",
"linkImagePosition": "left",
"tooltip": "",
"linkType": "email",
"linkImageSource": "styleclass"
},
{
"linkStyle": "pi pi-inbox-empty pi-empty-state",
"modeType": "readOnly",
"linkData": "Email Value",
"linkImagePosition": "left",
"autoPrepend": "",
"controlFormat": "Simple",
"tooltip": "Add content",
"showReadOnlyValidation": "false",
"autoAppend": "",
"linkType": "email",
"formatType": "text",
"linkImageSource": "styleclass"
}
],
"actionSets": [],
"label": "Submit",
"type": "pxLink"
},
"label": "Link Label",
"type": "Text",
"showLabel": true,
"required": false,
"validateAs": "",
"reference": "pyTemplateButton",
"labelFormat": "Announcement",
"disabled": false,
"testID": "202008170245340938636",
"value": "",
"maxLength": 0,
"expectedLength": "",
"fieldID": "pyTemplateButton"
}
}
],
"groupFormat": "Stacked",
"layoutFormat": "SIMPLELAYOUT",
"title": ""
}
}
]
},
"caseID": "OU1F1E-CODENINJAS-WORK N-123002",
"name": "Get info",
"actionID": "GetInfo"
}The following examples show a sample configuration of the control with the relevant JSON elements:
For the Control format field, the value for the
Standard option that is returned in the response is
pzhc. The remaining options are returned as they are displayed
in the UI. For example, the value for the Simple option
remains Simple.
Number control in DX API
The Number control (pxNumber) helps users any number in their forms. Learn about the JSON structure and elements of a sample Number control, to understand how you can integrate it into your custom application.
The following JSON code is a sample API response for the Number control:
{
"validationMessages": "",
"visible": true,
"labelReserveSpace": true,
"readOnly": false,
"control": {
"modes": [
{
"displayWithReadOnlyFormat": "true",
"charWidthUnits": "px",
"charWidth": "75",
"modeType": "editable",
"controlFormat": "",
"textAlign": "Right",
"tooltip": "",
"maxChars": "",
"placeholder": "",
"formatType": "number",
"specifySize": "custom",
"minChars": ""
},
{
"currencyType": "other",
"symbolPosition": "left",
"hasSeparators": true,
"textAlign": "Right",
"tooltip": "",
"showReadOnlyValidation": "true",
"numberScale": "billions",
"numberSymbol": "none",
"roundingMethod": "",
"negativeFormat": "minusStyle",
"modeType": "readOnly",
"decimalPlaces": "2",
"negativeFormatStyle": "NegativeNumber",
"currencySymbolPosition": "left",
"formatType": "number",
"otherCurrencySymbol": "$",
"obfuscated": false,
"displayCurrencyAs": "currencySymbol"
}
],
"actionSets": [
{
"actions": [
{
"action": "refresh",
"refreshFor": "VGVzdA%3D%3D"
}
],
"events": [
{
"event": "change"
}
]
},
{
"actions": [
{
"action": "refresh",
"refreshFor": "VGVzdA%3D%3D"
},
{
"action": "postValue"
}
],
"events": [
{
"event": "focus"
},
{
"event": "click"
}
]
}
],
"type": "pxNumber"
},
"label": "testnum",
"type": "Decimal",
"required": false,
"validateAs": "",
"reference": "testnum",
"labelFormat": "Standard",
"disabled": false,
"testID": "202008260252180847900",
"value": "12",
"maxLength": 0,
"expectedLength": "",
"fieldID": "testnum",
"customAttributes": {
"testName": "testVal"
}
}The following examples show a sample configuration of the control with the relevant JSON elements:
The response returns the name-value pairs that you add to the DX API attributes of
the control as part of the customAttributes element.
The message in the validationMessages element is displayed when the
validation in the validateAs element fails.
The response returns the value of the Edit options field as a boolean readOnly element. The read-only value is part of the value key in the JSON response.
Paragraph control in DX API
The Paragraph control helps users enter rich text, such as the results of JSP tags and stream processing in layout cells and headers, limited to 64 characters. Learn about the JSON structure and elements of a sample Paragraph control, to understand how you can integrate it into your custom application.
The following JSON code is a sample API response for the Paragraph control:
{
"visible": true,
"appliesTo": "aborg-AB86Dev-Work-NavTest",
"paragraphID": "TestPara",
"testID": "202008260854540281866",
"readOnly": false,
"value": "hi, how are you doing?"
}The following examples show a sample configuration of the control with the relevant JSON elements:
Phone control in DX API
The Phone control (pxPhone) helps users enter valid phone numbers in forms. Learn about the JSON structure and elements of a sample Phone control, to understand how you can integrate it into your custom application.
The following JSON code is a sample API response for the Phone control:
{
"validationMessages": "",
"visible": true,
"labelReserveSpace": true,
"readOnly": false,
"control": {
"modes": [
{
"modeType": "editable",
"controlFormat": "Standard",
"textAlign": "Left",
"tooltip": "User's contact info",
"maxChars": "13",
"placeholder": "Enter a valid phone number.",
"formatType": "tel",
"specifySize": "auto",
"minChars": "10"
},
{
"modeType": "readOnly",
"controlFormat": "Standard",
"tooltip": "",
"showReadOnlyValidation": "false",
"formatType": "tel",
"obfuscated": false
}
],
"actionSets": [],
"type": "pxPhone"
},
"label": "Enter phone no",
"type": "Text",
"required": true,
"validateAs": "",
"reference": "phone",
"labelFormat": "Standard",
"disabled": false,
"testID": "202008250326390088456",
"value": "+0000000000000",
"maxLength": 0,
"expectedLength": "",
"fieldID": "phone",
"customAttributes": {
"testAttr": "testVal"
}
} The following examples show a sample configuration of the control with the relevant JSON elements:
The response returns the name-value pairs that you add to the DX API attributes of
the control as part of the customAttributes element.
The message in the validationMessages element is displayed when the
validation in the validateAs element fails.
Radio buttons control in DX API
The Radio buttons control (pxRadioButtons) helps you display a horizontal or vertical list of options, from which a user can select a single option. Learn about the JSON structure and elements of a sample Radio buttons control, to understand how you can integrate the element into your custom application.
The following JSON code is a sample API response for the Radio buttons control:
{
"validationMessages": "",
"visible": true,
"labelReserveSpace": true,
"readOnly": false,
"control": {
"modes": [
{
"groupOrder": "asc",
"orientation": "vertical",
"clipboardPageValue": "StateAbbr",
"listSource": "pageList",
"textAlign": "Left",
"wrapAfter": "3",
"tooltip": "",
"enableGrouping": false,
"groupBy": "",
"minChars": "",
"clipboardPageTooltip": "StateFullName",
"modeType": "editable",
"clipboardPageID": "StateList",
"clipboardPagePrompt": "StateName",
"controlFormat": "",
"loadMode": "auto",
"options": [
{
"tooltip": "Commonwealth of Massachusetts",
"value": "Massachusetts",
"key": "MA"
},
{
"tooltip": "State of Rhode Island and Providence Plantations",
"value": "Rhode Island",
"key": "RI"
},
{
"tooltip": "New Hampshire",
"value": "New Hampshire",
"key": "NH"
}
],
"maxChars": "",
"placeholder": "sample RB",
"formatType": "text",
"specifySize": "auto",
"obfuscated": false
},
{
"modeType": "readOnly",
"autoPrepend": "",
"tooltip": "",
"showReadOnlyValidation": "false",
"autoAppend": "",
"formatType": "text",
"obfuscated": false
}
],
"actionSets": [],
"type": "pxRadioButtons"
},
"label": "Radio Buttons",
"type": "Text",
"required": false,
"validateAs": "",
"reference": "pyTemplateRadioButton",
"labelFormat": "Standard",
"disabled": false,
"testID": "2019082614265209413b8170e6-56db-4f4d-a7a2-825abcd1af2d84",
"value": "",
"maxLength": 0,
"expectedLength": "",
"fieldID": "pyTemplateRadioButton"
}The following examples show a sample configuration of the control with the relevant JSON elements:
The response returns the name-value pairs that you add to the DX API attributes of
the control as part of the customAttributes element.
The message in the validationMessages element is displayed when the
validation in the validateAs element fails.
Text area control in DX API
The Text area control (pxTextArea) helps your users enter long-form information comfortably in large text boxes. Learn about the JSON structure and elements of a sample Text area control, to understand how you can integrate it into your custom application.
The following JSON code is a sample API response for the Text area control:
{
"validationMessages": "Invalid value specified for test. Value doesn't adhere to the Validate: ValidEmailAddress",
"visible": true,
"labelReserveSpace": true,
"readOnly": true,
"control": {
"modes": [
{
"modeType": "editable",
"controlFormat": "Standard",
"textAlign": "Left",
"tooltip": "Text Area Tooltip Localized",
"maxChars": "",
"formatType": "text",
"specifySize": "auto",
"obfuscated": false,
"minChars": ""
},
{
"modeType": "readOnly",
"autoPrepend": "",
"tooltip": "",
"showReadOnlyValidation": "false",
"autoAppend": "",
"formatType": "text",
"obfuscated": false
}
],
"actionSets": [
{
"actions": [
{
"action": "refresh",
"refreshFor": "VGVzdA%3D%3D"
}
],
"events": [
{
"event": "change"
}
]
},
{
"actions": [
{
"action": "refresh",
"refreshFor": "VGVzdA%3D%3D"
},
{
"action": "postValue"
}
],
"events": [
{
"event": "focus"
},
{
"event": "click"
}
]
}
],
"type": "pxTextArea"
},
"label": "test",
"type": "Text",
"required": false,
"validateAs": "ValidEmailAddress",
"reference": "test",
"labelFormat": "Standard",
"disabled": false,
"testID": "202007070327440734311",
"value": ""Navateja"",
"maxLength": 256,
"expectedLength": "30",
"fieldID": "Test",
"customAttributes": {
"testAttr": "testVal"
}
}The following examples show a sample configuration of the control with the relevant JSON elements:
The response returns the name-value pairs that you add to the DX API attributes of
the control as part of the customAttributes element.
The message in the validationMessages element is displayed when the
validation in the validateAs element fails.
- The response returns the value of the Edit options field as a boolean readOnly element. The read-only value is part of the value key in the JSON response.
- Regardless of the setting in the Specify Width field, the response always
returns the following line:
control.modes[0].specifySize: auto.
Text input control in DX API
The Text input control (pxTextInput) helps users enter custom text in their forms. Learn about the JSON structure and elements of a sample Text input control, to understand how you can integrate it into your custom application.
The following JSON code is a sample API response for the Text input control:
{
"validationMessages": "",
"visible": true,
"labelReserveSpace": true,
"readOnly": false,
"control": {
"modes": [
{
"captionPosition": "right",
"modeType": "editable",
"controlFormat": "Standard",
"textAlign": "Left",
"tooltip": "checkbox hover",
"maxChars": "",
"formatType": "text",
"specifySize": "auto",
"obfuscated": false,
"minChars": ""
},
{
"trueLabel": "True",
"modeType": "readOnly",
"falseLabel": "False",
"falseImage": "",
"showValueAs": "text",
"tooltip": "",
"showReadOnlyValidation": "true",
"formatType": "truefalse",
"obfuscated": false,
"trueImage": ""
}
],
"actionSets": [
{
"actions": [
{
"action": "refresh",
"refreshFor": "VGVzdA%3D%3D"
}
],
"events": [
{
"event": "change"
}
]
},
{
"actions": [
{
"action": "refresh",
"refreshFor": "VGVzdA%3D%3D"
},
{
"action": "postValue"
}
],
"events": [
{
"event": "focus"
},
{
"event": "click"
}
]
}
],
"label": "checkbox caption",
"type": "pxCheckbox"
},
"label": "Checkbox",
"type": "True-False",
"showLabel": true,
"required": false,
"validateAs": "",
"reference": "cbprop",
"labelFormat": "Standard",
"disabled": false,
"testID": "20200730015740046596",
"value": "true",
"maxLength": 0,
"expectedLength": "",
"fieldID": "cbprop",
"customAttributes": {
"testAttr": "testVal"
}
}The following examples show a sample configuration of the control with the relevant JSON elements:
The response returns the name-value pairs that you add to the DX API attributes
of the control as part of the customAttributes element.
The message in the validationMessages element is displayed
when the validation in the validateAs element fails.
URL control in DX API
The URL control (pxURL) helps users enter web addresses in forms. Learn about the JSON structure and elements of a sample URL control, to understand how you can integrate it into your custom application.
The following JSON code is a sample API response for the URL control:
{
"view": {
"reference": "",
"validationMessages": "",
"viewID": "GetInfo",
"visible": true,
"name": "Get info",
"appliesTo": "OU1F1E-CodeNinjas-Work-NoCase",
"groups": [
{
"layout": {
"visible": true,
"titleFormat": "h2",
"containerFormat": "NOHEADER",
"groups": [
{
"field": {
"validationMessages": "",
"visible": true,
"labelReserveSpace": true,
"readOnly": true,
"control": {
"modes": [
{
"charWidthUnits": "px",
"charWidth": "170",
"modeType": "editable",
"controlFormat": "Assignment title",
"textAlign": "Center",
"tooltip": "Add a valid url",
"maxChars": "20",
"placeholder": "Add content",
"formatType": "url",
"specifySize": "custom",
"minChars": "10"
},
{
"modeType": "readOnly",
"controlFormat": "Badge text",
"tooltip": "",
"showReadOnlyValidation": "true",
"formatType": "url",
"obfuscated": false
}
],
"actionSets": [],
"type": "pxURL"
},
"label": "Service URL",
"type": "Text",
"required": true,
"validateAs": "pxIsValidURL",
"reference": "ServiceURL",
"labelFormat": "Announcement",
"disabled": false,
"testID": "202008170245340938636",
"value": "",
"maxLength": 256,
"expectedLength": "",
"fieldID": "ServiceURL",
"customAttributes": {
"testattrName": "testattrValue"
}
}
}
],
"groupFormat": "Stacked",
"layoutFormat": "SIMPLELAYOUT",
"title": ""
}
}
]
},
"caseID": "OU1F1E-CODENINJAS-WORK N-159002",
"name": "Get info",
"actionID": "GetInfo"
}The following examples show a sample configuration of the control with the relevant JSON elements:
The JSON response does not contain the data in the Tour ID field.
- For the Edit options field, the Read-only (expression) option is not supported.
- The JSON response does not contain the data for the Read-only value field.
Previous topic Layouts in DX API Next topic Implementation of actions in DX API