Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

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).
Default is false.

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.
Default is true.

closeOnClick (boolean)

This field may contain information if the dialog should be closed when user clicking outside dialog.
Default is true.

closeOnEsc (boolean)

This field may contain information if the dialog can be closed with ESC button.
Default is true.

closeText (string)

This field may contain the text showed on the close button.
Default is Close.

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:
SMALL, LARGE, XL
Default is empty meaning MEDIUM.

topPlacement (boolean)

This field may contain a information if the dialog should be present in the top of the page or in the middle.
Default is false.

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.
Possible values:

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:
URL_ENCODED, TEXT_PLAIN, MULTIPART
Default is URL_ENCODED.

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:
METHOD_GET, METHOD_POST.
Default is METHOD_GET.

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 text-center can be added.

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:
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

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.
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:

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.
Some constants is added to help:
SOLID, REGULAR, LIGHT, DUETONE and THIN
Default is SOLID

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.
Some constants is added to help:
SOLID, REGULAR, LIGHT, DUETONE and THIN
Default is SOLID

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.
Default is false.

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.
Default is false.

preFormatted (boolean)

This field may contain a boolean if the text is already formatted.
Default is false.

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 form-check-inline.

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.
Either this or dbTable field is required to show a table.

dbTable (table)

This field may contain a table object. Useful when showing a database table.
Either this or data field is required to show a 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.
Default is true

showHeader (boolean)

This field may contain a boolean if the table should have a header.
Default is true

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.
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.

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.

  • No labels