...
The following fields are included in the CheckBox UDR
:
Field
Description
attributes (map<string,string>)
This field may contain extra attributes to be added.
cssClasses (list<string>)
This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap.
disabled (boolean)
This field may contain a boolean if the component should be disabled or enabled.
id (string)
This field may contain the id of the component
label (string)
This field may contain the label for the generic input field.
labelCssClasses (list<string>)
This field may contain a list of extra values added to class attribute of the label. This is typically used to style the component. Please read more on Bootstrap.
name (string)
This field may contain the name of the component
placeholder (string)
This field may contain a text that can be used as a help text.
readonly (boolean)
This field may contain a boolean if the field is readonly.
Field | Description |
---|---|
attributes (map<string,string>) | This field may contain extra attributes to be added. |
checked (boolean) | This field may contain a boolean if the checkbox should be checked by default (when the page loads). |
cssClasses (list<string>) | This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. |
disabled (boolean) | This field may contain a boolean if the component should be disabled or enabled. |
id (string) | This field may contain the id of the component |
label (string) | This field must may contain the label for the checkbox. |
labelCssClasses (list<string>) | This field may contain a list of extra values added to class attribute of the label. This is typically used to style the component. Please read more on Bootstrap. |
name (string) | This field may contain the name of the component |
required (boolean) | This field may contain a boolean if the component is required. Typically used inside a Form UDR. |
value (string) | This field may contain a value that should be submitted when it is used inside a Form UDR. Default is on. |
Dialog UDR
The Dialog UDR
is used to create a dialog over the actual page.
...
The following fields are included in the Dialog UDR
:
Field | Description |
---|---|
addAutomatic (boolean) | This field may contain information if the Dialog should be added to the page automatic when Dialog UDR is added to a Button UDR or Link UDR. |
attributes (map<string,string>) | This field may contain extra attributes to be added. |
closeButton (boolean) | This field may contain information if a button to close the dialog should be added or not. |
closeOnClick (boolean) | This field may contain information if the dialog should be closed when user clicking outside dialog. |
closeOnEsc (boolean) | This field may contain information if the dialog can be closed with ESC button. |
closeText (string) | This field may contain the text showed on the close button. |
cssClasses (list<string>) | This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. |
dialogBody (ComponentUDR) | This field contain a Component UDR that will be present in the dialog body. |
header (string) | This field may contain a dialog header text. |
id (string) | This field may contain the id of the component |
okButton (ButtonUDR) | This field may contain a “ok” button that will be placed in the footer of the dialog. |
size (string) | This field may contain the size of the dialog. Possible values are the constants: |
topPlacement (boolean) | This field may contain a information if the dialog should be present in the top of the page or in the middle. |
DropDown UDR
The DropDown UDR
is used to dropdown element on a page were a user can select a item out of many.
...
The following fields are included in the DropDown UDR
:
Field | Description | ||
---|---|---|---|
attributes (map<string,string>) | This field may contain extra attributes to be added. | ||
cssClasses (list<string>) | This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. | ||
disabled (boolean) | This field may contain a boolean if the component should be disabled or enabled. | ||
id (string) | This field may contain the id of the component | ||
items (map<string,string>) | This field must contain a map of key value pairs. The key will be present in UI and the value will be set on the Value attribute. Meaning the value will be sent if the dropbox is submitted in a Form UDR.
| ||
label (string) | This field may contain the label for the dropdown. | ||
labelCssClasses (list<string>) | This field may contain a list of extra values added to class attribute of the label. This is typically used to style the component. Please read more on Bootstrap. | ||
name (string) | This field may contain the name of the component | ||
selected (string) | This field may contain a string matching a value in the Items map. If a match is found this Item will be selected in the dropdown. |
Form UDR
The Form UDR
is used to create a form which includes other components were a user can enter data to be sent to workflow.
...
The APL code to produce the above example is this:
Code Block |
---|
//Create the Form UDR
Form searchform = udrCreate(Form);
searchform.method = searchform.METHOD_POST;
//Create the textfield to be included in the form.
TextField searchText = udrCreate(TextField);
searchText.id = "search";
//Must include name otherwise the data can not be sent to workflow
searchText.name = "search";
searchText.placeholder = "Filter Results";
//Create the send button
Button searchButton = udrCreate(Button);
searchButton.buttonType = searchButton.SUBMIT;
searchButton.text = "Search";
//Add the components to the form
searchform.components = listCreate(ComponentUDR, searchText, searchButton); |
A form example that uses a grid to place the components.
...
The APL code to produce the above example is this:
Code Block |
---|
// Create text fields
TextField userTextField = udrCreate(TextField);
userTextField.name = "username";
userTextField.label = "Create a username";
TextField aliasTextField = udrCreate(TextField);
aliasTextField.name = "alias";
aliasTextField.label = "Create an alias";
// Create a radio button group
RadioButtonGroup radioButton = udrCreate(RadioButtonGroup);
radioButton.name = "radioButton";
radioButton.label = "Select a color";
// Create a ordered map to control the order of the radio button
radioButton.buttons = mapCreateOrdered(string, string);
mapSet(radioButton.buttons, "Red", "red");
mapSet(radioButton.buttons, "Blue", "blue");
mapSet(radioButton.buttons, "Green", "green");
// Create integer fields
IntegerField portIntegerField = udrCreate(IntegerField);
portIntegerField.label = "Port";
portIntegerField.name = "port";
IntegerField timeoutIntegerField = udrCreate(IntegerField);
timeoutIntegerField.label = "Timeout";
timeoutIntegerField.name = "timeout";
// Create a dropdown
DropDown dropdown = udrCreate(DropDown);
dropdown.name = "dropdown";
dropdown.label = "Dropdown";
dropdown.items = mapCreateOrdered(string, string);
mapSet(dropdown.items, "Select an item", "");
mapSet(dropdown.items, "First Value", "first");
mapSet(dropdown.items, "Second Value", "second");
// Create a button to be used as the submit button in the form
Button formSubmitButton = udrCreate(Button);
formSubmitButton.text = "Submit";
formSubmitButton.buttonType = formSubmitButton.SUBMIT;
// Create a grid to be used in the form
Grid formGrid = udrCreate(Grid);
formGrid.rows = listCreate(GridRow);
// Add the columns to a row, and then insert that row into the formGrid's rows.
// To simplify the creation of columns and rows, they have been moved to helper functions.
listAdd(formGrid.rows, getRow([getColumn(userTextField, 6), getColumn(aliasTextField, 6)]));
listAdd(formGrid.rows, getRow([getColumn(radioButton, 0)]));
listAdd(formGrid.rows, getRow([getColumn(portIntegerField, 6), getColumn(timeoutIntegerField, 6)]));
listAdd(formGrid.rows, getRow([getColumn(dropdown, 0)]));
listAdd(formGrid.rows, getRow([getColumn(formSubmitButton, 0)]));
// Create the form UDR
Form form = udrCreate(Form);
form.method = form.METHOD_POST;
// Add the grid, which was created for the form and holds the components, as a component of the form.
form.components = listCreate(ComponentUDR, formGrid); |
Code Block |
---|
// Helper functions for column and row
GridColumn getColumn(ComponentUDR comp, int width){
GridColumn col = udrCreate(GridColumn);
if(width > 0){
col.width = width;
}
col.components = listCreate(ComponentUDR, comp);
return col;
}
GridRow getRow(list<GridColumn> columns){
GridRow row = udrCreate(GridRow);
row.columns = listCreate(GridColumn);
for (GridColumn column: columns) {
listAdd(row.columns, column);
}
return row;
} |
The following fields are included in the Form UDR
:
Field | Description |
---|---|
action (string) | This field may contain a string that specifies where to send the form data when a form is submitted.
|
attributes (map<string,string>) | This field may contain extra attributes to be added. |
components (list<ComponentUDR>) | This field may contain a list of child components, the components that will produce the form data. They can be added direct in the list or inside a Grid UDR and then the Grid UDR is added here. |
cssClasses (list<string>) | This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. |
encoding (string) | This field may contain may a string for encoding. Some constants is added to help: |
id (string) | This field may contain the id of the component |
method (int) | This field may contain method used to submit the form. Possible values are: |
name (string) | This field may contain the name of the component |
GenericElement UDR
The GenericElement UDR
is used to create any HTML element.
To create a image on a page the GenericElement can be used like this:
Code Block |
---|
GenericElement img = udrCreate(GenericElement);
img.tag = "img";
img.attributes = mapCreate(string, string);
mapSet(img.attributes, "src", "https://www.w3schools.com/jsref/img_pulpit.jpg");
mapSet(img.attributes, "width", "304");
mapSet(img.attributes, "height", "228"); |
The following fields are included in the GenericElement UDR
:
Field | Description |
---|---|
attributes (map<string,string>) | This field may contain extra attributes to be added. |
components (list<ComponentUDR>) | This field contain a list of child components. |
cssClasses (list<string>) | This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. |
id (string) | This field may contain the id of the component |
tag (string) | This field contain a tag name for a valid HTML tag. For example: Div, Img, Span, … |
GenericInputField UDR
The GenericInputField UDR
is used to create other types of input.
To create a date input picker the GenericInputField can be used like this:
Code Block |
---|
GenericInputField dateField = udrCreate(GenericInputField);
dateField.name = "date";
dateField.type = "date";
dateField.label = "A GenericInput"; |
The following fields are included in the GenericInputField UDR
:
. If the component is present in a Form UDR, the name will be submitted with the form as the key in the Params Map in Request UDR. | |
required (boolean) | This field may contain a boolean if the component is required. Typically used inside a Form UDR. |
value (int)
This field contain the input type. For example: date, file, email…
value |
Grid UDR
The Grid UDR
is the top UDR to make a layout with rows and columns.
The following fields are included in the Grid UDR
:
Field | Description |
---|---|
attributes (map<string,string>) | This field may contain extra attributes to be added. |
cssClasses (list<string>) | This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. For example to align all components in middle |
id (string) | This field may contain the id of the component |
rows (list<GridRowUDR>) | This field contain a list of GridRow UDRs. |
GridColumn UDR
The GridColumn UDR
is used to column inside a GridRow.
...
( |
...
The following fields are included in the GridColumn UDR
:
Field
Description
attributes (map<string,string>)
This field may contain extra attributes to be added.
string |
This field may contain a break point that is widths that determine how your responsive layout behaves across device or viewport sizes. Possible values are:
sm (small >= 576px),
md (medium >= 768px),
lg (large >=992px),
xl (extra large >= 1200px) and
xxl (extra extra large >=1400px)
Please read more on Bootstrap.
components (list<ComponentUDR>)
This field contain a list of child components, the components that will present in the column.
cssClasses (list<string>)
This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap.
id (string)
This field may contain the id of the component
width (int)
This field may contain a width value. Possible values are 1-12.
There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Width indicate the number of template columns to span (e.g., 4 spans four out of 12, so this column will take 33.3% width of the total number of columns). Actual width on page are set in percentages so you always have the same relative sizing.
Default is auto, the column will take as much as it get.
GridRow UDR
The GridRow UDR
is used to create a grid row with one or many columns.
The following fields are included in the GridRow UDR
:
Field | Description |
---|---|
columns (list<GridColumnUDR>) | This field contain a list of GridColumn UDRs. |
cssClasses (list<string>) | This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. |
Header UDR
The Header UDR
is used to a header. A header is a text that is bigger than normal text. The size of the header can be chosen from 1-5.
To create a h2 element this code can be used
Code Block |
---|
Header h2 = udrCreate(Header);
h2.text = "H2 Header";
h2.headerSize = 2; |
The following fields are included in the Header UDR
:
Field
Description
attributes (map<string,string>)
This field may contain extra attributes to be added.
cssClasses (list<string>)
This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap.
) | This field may contain a |
value |
Default is 1
id (string)
This field may contain the id of the component.
text (string)
This field must contain the header text.
Icon UDR
The Icon UDR
is used to create an icon. The Icon UDR is creating a Font Awesome icon. The icon name needs to be found at Font Awesome page. It is possible to stack two icons on top of each other. The one entered in the field stackedIconName will be on top and little bigger.
...
To create the above stacked icon this code is needed:
Code Block |
---|
Icon clearSearchIcon = udrCreate(Icon);
clearSearchIcon.iconName = "fa-magnifying-glass";
clearSearchIcon.iconStyle = clearSearchIcon.SOLID;
clearSearchIcon.stackedIconName = "fa-ban";
clearSearchIcon.stackedIconStyle = clearSearchIcon.SOLID;
clearSearchIcon.stackedIconColor = "tomato"; |
The following fields are included in the Icon UDR
:
Field | Description |
---|---|
attributes (map<string,string>) | This field may contain extra attributes to be added. |
cssClasses (list<string>) | This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. |
iconColor (string) | This field may contain a string of the color. It will be added in the style attribute. It must follow CSS Color style. |
iconName (string) | This field must contain the icon name. It must be a Font Awesome icon name, eg. fa-magnifying-glass. |
iconStyle (string) | This field may contain a string of the icon style. It must following Font Awesome. |
id (string) | This field may contain the id of the component. |
stackedIconColor (string) | This field may contain a string of the color for the stacked icon. It will be added in the style attribute. It must follow CSS Color style. |
stackedIconName (string) | This field may contain the icon name for an icon placed on top of the regular icon. It must be a Font Awesome icon name, eg. fa-ban. |
stackedIconStyle (string) | This field may contain a string of the icon style for the stacked icon. It must following Font Awesome. |
IntegerField UDR
The IntegerField UDR
is used to create a input field that only accept Integers.
...
that |
...
Code Block |
---|
IntegerField num = udrCreate(IntegerField);
num.label = "Even Numbers";
num.step = 2;
num.min = 0;
num.max = 100; |
The following fields are included in the IntegerField UDR
:
Field | Description |
---|---|
attributes (map<string,string>) | This field may contain extra attributes to be added. |
cssClasses (list<string>) | This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. |
disabled (boolean) | This field may contain a boolean if the component should be disabled or enabled. |
id (string) | This field may contain the id of the component |
label (string) | This field may contain the label for the integer field. |
labelCssClasses (list<string>) | This field may contain a list of extra values added to class attribute of the label. This is typically used to style the component. Please read more on Bootstrap. |
max (int) | This field may contain a max value. |
min (int) | This field may contain a min value. |
name (string) | This field may contain the name of the component. |
placeholder (string) | This field may contain a placeholder can be used as a help text. |
readonly (boolean) | This field may contain a boolean if the field is readonly. |
required (boolean) | This field may contain a boolean if the component is required. Typically used inside a Form UDR. |
step (int) | This field may contain a value to specifies the legal number intervals |
value (int) | This field may contain a value. |
Label UDR
The Label UDR
is used to create a label that can be associated with a component.
Code Block |
---|
// Use the generic element to create a meter
GenericElement meter = udrCreate(GenericElement);
meter.tag = "meter";
meter.attributes = mapCreate(string, string);
mapSet(meter.attributes, "min", "0");
mapSet(meter.attributes, "max", "100");
mapSet(meter.attributes, "value", "50");
// Create a label and associate it with the meter element
Label meterLabel = udrCreate(Label);
meterLabel.labelFor = meter;
meterLabel.labelText = "Level:"; |
The following fields are included in the Label UDR
:
Field | Description |
---|---|
attributes (map<string,string>) | This field may contain extra attributes to be added. |
cssClasses (list<string>) | This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. |
id (string) | This field may contain the id of the component |
labelFor (ComponentUDR) | This field may contain the component to associate the label with. |
Link UDR
The Link UDR
is used to create a link. A link can be used to send user to another page or open a dialog. To create a normal link of a text, set the text field. If a user should be linked by clicking a icon, add the icon in the components field.
To get a working link the URL field or Dialog field must be set.
You can use this APL code to create a link that uses the 'url' field
Code Block |
---|
Link page2 = udrCreate(Link);
page2.text = "Go to next page";
page2.url = "/page2"; |
You can use this APL code to create a link that uses the 'dialog' field
Code Block |
---|
// Create the dialog that will open when clicking the link
PlainText bodyText = udrCreate(PlainText);
bodyText.value = "Dialog Body";
Dialog linkDialog = udrCreate(Dialog);
linkDialog.dialogBody = bodyText;
// Create a link that opens the dialog created above
Link openDialog = udrCreate(Link);
openDialog.text = "Open dialog";
openDialog.dialog = linkDialog; |
The following fields are included in the Link UDR
:
Field | Description |
---|---|
attributes (map<string,string>) | This field may contain extra attributes to be added. |
components (list<ComponentUDR>) | This field may contain a list of child components. This can be used if for example a icon should act as a link. |
cssClasses (list<string>) | This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. |
dialog (Dialog UDR) | This field may contain a Dialog UDR if the link should open a dialog. If the Dialog UDR have the field addAutomatic it will also be added to the page. |
id (string) | This field may contain the id of the component |
url (string) | This field may contain the url to the linked page. |
text (string) | This field may contain a link text, then a text component will be added as a child component. It can also be done manually by adding a component in the components list. |
NumberField UDR
The NumberField UDR
is used to create a input field that only accept numbers.
To create a number field that only accept numbers of 0.5 between 0.0 and 100.0.
Code Block |
---|
NumberField num = udrCreate(NumberField);
num.label = "Only x.5 or x.0 number is accepted";
num.step = 0.5d;
num.min = 0.0d;
num.max = 100.0d; |
The following fields are included in the NumberField UDR
:
Field | Description |
---|---|
attributes (map<string,string>) | This field may contain extra attributes to be added. |
cssClasses (list<string>) | This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. |
disabled (boolean) | This field may contain a boolean if the component should be disabled or enabled. |
id (string) | This field may contain the id of the component |
label (string) | This field may contain the label for the number field. |
labelCssClasses (list<string>) | This field may contain a list of extra values added to class attribute of the label. This is typically used to style the component. Please read more on Bootstrap. |
max (double) | This field may contain a max value. Need to use data type double, set trailing d. |
min (double) | This field may contain a min value. Need to use data type double, set trailing d. |
name (string) | This field may contain the name of the component. |
placeholder (string) | This field may contain a placeholder can be used as a help text. |
readonly (boolean) | This field may contain a boolean if the field is readonly. |
required (boolean) | This field may contain a boolean if the component is required. Typically used inside a Form UDR. |
step (double) | This field may contain a value to specifies the legal number intervals Need to use data type double, set trailing d. |
value (double) | This field may contain a value. Need to use data type double, set trailing d. |
Password UDR
The Password UDR
is used to create a input field for passwords, it acts like a text field but the text entered will be hidden by dots.
You can use this APL code to create a password field that is required
Code Block |
---|
Password password = udrCreate(Password);
password.label = "Password";
password.required = true; |
The following fields are included in the Password UDR
:
Field | Description |
---|---|
attributes (map<string,string>) | This field may contain extra attributes to be added. |
cssClasses (list<string>) | This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. |
disabled (boolean) | This field may contain a boolean if the component should be disabled or enabled. |
id (string) | This field may contain the id of the component |
label (string) | This field may contain the label for the password. |
labelCssClasses (list<string>) | This field may contain a list of extra values added to class attribute of the label. This is typically used to style the component. Please read more on Bootstrap. |
name (string) | This field may contain the name of the component. |
placeholder (string) | This field may contain a placeholder can be used as a help text. |
readonly (boolean) | This field may contain a boolean if the field is readonly. |
required (boolean) | This field may contain a boolean if the component is required. Typically used inside a Form UDR. |
value (int) | This field may contain a value. |
PlainText UDR
The PlainText UDR
is used to create a plain text element. There are elements to set if the text should be bold or italic.
You can use this APL code to create text with both bold and italic styles
Code Block |
---|
PlainText myText = udrCreate(PlainText);
myText.value = "This text has the styles bold and italic.";
myText.italic = true;
myText.bold = true; |
The following fields are included in the PlainText UDR
:
Field | Description |
---|---|
attributes (map<string,string>) | This field may contain extra attributes to be added. |
bold (boolean) | This field may contain a boolean if the text should be bold. |
cssClasses (list<string>) | This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. |
id (string) | This field may contain the id of the component |
italic (boolean) | This field may contain a boolean if the text should be italic. |
preFormatted (boolean) | This field may contain a boolean if the text is already formatted. |
value (string) | This field contain the text. |
RadioButtonGroup UDR
The RadioButtonGroup UDR
is used to create a radio button group.
...
To create a radio button group with a default selected radio button as shown above this code can be used.
Code Block |
---|
// Create a radio button group
RadioButtonGroup radioButton = udrCreate(RadioButtonGroup);
radioButton.name = "color";
radioButton.label = "Select a color";
// Create a ordered map to control the order of the radio button
radioButton.buttons = mapCreateOrdered(string, string);
mapSet(radioButton.buttons, "Red", "red");
mapSet(radioButton.buttons, "Blue", "blue");
mapSet(radioButton.buttons, "Green", "green");
// The radio button with value red will be default selected
radioButton.selected = "red"; |
The following fields are included in the RadioButtonGroup UDR
:
Field | Description | ||
---|---|---|---|
attributes (map<string,string>) | This field may contain extra attributes to be added. | ||
buttons (map<string,string>) | This field must contain a map of key value pairs. The key will be present on the label next to the radio button and the value will be set on the Value attribute. Meaning the value will be sent if the radio button is submitted in a Form UDR.
| ||
cssClasses (list<string>) | This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. It will be added to each radio div tag. Then it can be used to get a horisontal view by add | ||
disabled (boolean) | This field may contain a boolean if the component should be disabled or enabled. | ||
id (string) | This field may contain the id of the component | ||
label (string) | This field may contain the label for the radio button group. | ||
labelCssClasses (list<string>) | This field may contain a list of extra values added to class attribute of the label. This is typically used to style the component. Please read more on Bootstrap. | ||
name (string) | This field may contain the name of the component. | ||
required (boolean) | This field may contain a boolean if the component is required. Typically used inside a Form UDR. | ||
selected (string) | This field may contain a string matching a value in the Buttons map. If a match is found this radio button will be selected. |
Table UDR
The Table UDR
is used to create a table. This UDR is used together with TableRow UDR or a Table object. The table rows are default striped.
...
To create the table shown above, you can use the following APL code
Code Block |
---|
// Create a table row for the header row
TableRow headerRow = udrCreate(TableRow);
headerRow.columns = listCreate(TableColumn);
// Create columns and add them to the header row
listAdd(headerRow.columns, getTableColumn(getText("Decimal"), 0));
listAdd(headerRow.columns, getTableColumn(getText("Hexadecimal"), 0));
// Create the Table UDR
Table myTable = udrCreate(Table);
myTable.columnNames = headerRow;
// Insert table rows that contain the table columns into the data field.
myTable.data = listCreate(TableRow);
listAdd(myTable.data, getTableRow([getTableColumn(getText("10"), 0), getTableColumn(getText("0xA"), 0)]));
listAdd(myTable.data, getTableRow([getTableColumn(getText("11"), 0), getTableColumn(getText("0xB"), 0)]));
listAdd(myTable.data, getTableRow([getTableColumn(getText("12"), 0), getTableColumn(getText("0xC"), 0)])); |
Code Block |
---|
// Helper functions for table creation
PlainText getText(string text) {
PlainText pText = udrCreate(PlainText);
pText.value = text;
return pText;
}
TableColumn getTableColumn(ComponentUDR comp, int width){
TableColumn col = udrCreate(TableColumn);
if(width > 0){
col.width = width;
}
col.components = listCreate(ComponentUDR, comp);
return col;
}
TableRow getTableRow(list<TableColumn> columns){
TableRow row = udrCreate(TableRow);
row.columns = listCreate(TableColumn);
for (TableColumn column: columns) {
listAdd(row.columns, column);
}
return row;
} |
The following fields are included in the Table UDR
:
Field | Description |
---|---|
attributes (map<string,string>) | This field may contain extra attributes to be added. |
columnNames (TableRow) | This field may contain a TableRow UDR to define the header. |
cssClasses (list<string>) | This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. |
currentPage (int) | This field may contain the current page, only used when usePagination is true. |
data (list<TableRow>) | This field may contain the table data in form of a list of TableRow UDRs. |
dbTable (table) | This field may contain a table object. Useful when showing a database table. |
id (string) | This field may contain the id of the component |
rowsPerPage (int) | This field may contain the number of rows in the table, only used when usePagination is true. |
showBorders (boolean) | This field may contain a boolean if borders on all sides of the table and cells should be added. |
showHeader (boolean) | This field may contain a boolean if the table should have a header. |
url (string) | This field is used to provide the url stub that will be used for pagination. If you provide e.g. "/table/mytable?page=" the url for page 5 will be "/table/mytable?page=5, only used when usePagination is true. |
usePagination (boolean) | This field may contain a boolean if the table should use pagination, when true currentPage, rowsPerPage and url also needs to be set. |
TableColumn UDR
The TableColumn UDR
is used to create a table column see Table UDR for example.
The following fields are included in the TableColumn UDR
:
Field | Description |
---|---|
attributes (map<string,string>) | This field may contain extra attributes to be added. |
colspan (int) | This field may contain a number of how many columns this column will span over. |
components (list<ComponentUDR>) | This field contain a list of child components, the components that will present in the column. |
cssClasses (list<string>) | This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. |
id (string) | This field may contain the id of the component |
width (int) | This field may contain a width value. Possible values are 1-12. |
TableRow UDR
The TableRow UDR
is used to create a table row, it is used together with TableColumn UDR, see Table UDR for example.
The following fields are included in the TableRow UDR
:
Field | Description |
---|---|
columns (list<TableColumnUDR>) | This field contain a list of TableColumn UDRs. |
cssClasses (list<string>) | This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. |
TextArea UDR
The TextArea UDR
is used to create an input for text areas.
Info |
---|
When this component is used inside a Form UDR the Form UDR can not use encoding PLAIN_TEXT, otherwise the decoding of parameters will fail. |
You can use this APL code to create a text area with 10 rows
Code Block |
---|
TextArea myTextArea = udrCreate(TextArea);
myTextArea.rows = 10;
myTextArea.placeholder = "Enter your text here:"; |
The following fields are included in the TextArea UDR
:
Field | Description |
---|---|
attributes (map<string,string>) | This field may contain extra attributes to be added. |
cssClasses (list<string>) | This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap. |
disabled (boolean) | This field may contain a boolean if the component should be disabled or enabled. |
id (string) | This field may contain the id of the component |
label (string) | This field may contain the label for the text area. |
labelCssClasses (list<string>) | This field may contain a list of extra values added to class attribute of the label. This is typically used to style the component. Please read more on Bootstrap. |
name (string) | This field may contain the name of the component. |
placeholder (string) | This field may contain a placeholder can be used as a help text. |
readonly (boolean) | This field may contain a boolean if the field is readonly. |
required (boolean) | This field may contain a boolean if the component is required. Typically used inside a Form UDR. |
rows (int) | This field may contain a value to specifies how many rows should be visible. |
value (int) | This field may contain a value. |
TextField UDR
The TextField UDR
is used to create input text field.
You can use this APL code to create a text field that is required and has a placeholder text to assist the user with the syntax
Code Block |
---|
TextField username = udrCreate(TextField);
username.name = "username";
username.label = "Username";
username.required = true;
username.placeholder = "user@email.com"; |
The following fields are included in the TextField UDR
:
Field
Description
attributes (map<string,string>)
This field may contain extra attributes to be added.
cssClasses (list<string>)
This field may contain a list of extra values added to class attribute. This is typically used to style the component. Please read more on Bootstrap.
disabled (boolean)
This field may contain a boolean if the component should be disabled or enabled.
id (string)
This field may contain the id of the component
label (string)
This field may contain the label for the text field.
labelCssClasses (list<string>)
This field may contain a list of extra values added to class attribute of the label. This is typically used to style the component. Please read more on Bootstrap.
name (string)
This field may contain the name of the component.
placeholder (string)
This field may contain a placeholder can be used as a help text.
readonly (boolean)
This field may contain a boolean if the field is readonly.
required (boolean)
This field may contain a boolean if the component is required. Typically used inside a Form UDR.
value (int)
should be submitted when it is used inside a Form UDR. Default is on. |