The CheckBox UDR
is used to create a checkbox.
The following fields are included in the CheckBox UDR
:
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. To get the items in the same order as added the map needs to be created with mapCreateOrdered function. |
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:
//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:
// 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);
// 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:
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:
GenericInputField dateField = udrCreate(GenericInputField); dateField.name = "date"; dateField.type = "date"; dateField.label = "A GenericInput";
The following fields are included in the GenericInputField 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. |
required (boolean) | This field may contain a boolean if the component is required. Typically used inside a Form UDR. |
type (string) | This field contain the input type. For example: date, file, email… |
value (int) | This field may contain a 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.
To design the grid there is a width field that can have a value from 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. See example:
The following fields are included in the GridColumn UDR
:
Field | Description |
---|---|
attributes (map<string,string>) | This field may contain extra attributes to be added. |
breakPoint (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: 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. |
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
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. |
headerSize (int) | This field may contain a size value between 1-5. |
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:
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.
To create a integer field that only accept even numbers between 0 - 100 this code can be used.
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.
// 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
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
// 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.
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
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
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.
// 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. To get the items in the same order as added the map needs to be created with mapCreateOrdered function. |
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
// 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)]));
// 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.
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
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
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) | This field may contain a value. |
Add Comment