Create elements

With drag & drop, it is easy to create high performance applications and forms. A toolbox with building blocks is available for creating application pages: Input fields, buttons, tables, charts, filters and much more. Each element has a graphical configuration dialog that allows for detailed settings.

Elements can be created in the "Applications" module. To learn how to open the module in the Portal Manager, click here. Create an application or open an existing, published application.

To create a new element, please select a page in the application structure. Depending on the type of page you selected, only the elements which are suitable for the page will be available in the Elements area. Next, drag the element that you wish to create to the workspace. The borders of the element will be shown as a preview of the element. When you let go of the mouse button, a wizard will open that will help you configure the element.

The help for the wizard dialog pages can be accessed by pressing the F1 key or by clicking on the help button at the bottom right of the display. In addition, you can also find the corresponding information in the element description.

Behavior of focus and autofocus

You can define that edit fields and buttons (which have the “Button” or “Text” type) should be given the focus when the page is loaded via the Edit menu / Set focus. You can define "Set focus" for one or more elements. When the page is loaded, the focus is set to the first visible element.

You can define that a page should not set a focus in the page properties. If "Set focus" has not been defined for any elements on a page, the initially focused element on the page is determined automatically. The following exceptions apply:

• The focus is not set on fields in free layout tables

• The focus is not set within portlets

• If a page has a tab index, the focus is set on the element with "Tab index 1”.

Appearance in the Elements area

How the elements are displayed in the Elements area can be changed via the context menu.

• Show icons

  Only the icons of the elements are shown with this option.

• Show icons and titles

  The elements' icons and titles are shown with this option.

• Show icons and descriptions

  The elements' icons and descriptions are shown with this option.

• Show category overview

  For this setting, the element categories will be shown in the top half of the Elements area.

If you select a category from the category overview, only the elements from that category will be shown in the bottom section of the Elements area.

Search

The search is at the very bottom of the Elements area. Enter a search term here. and the elements will be filtered based on your entry.

Reset filter

Deletes the search term and removes the filter.

Basic controls

Button

Click here for more information about this element.

Static text

Click here for more information about this element.

Edit field

View field

Dynamic view

If you link this element to a data field, e.g. a User ID, you can display a different value from the same data group, e.g. the corresponding username. The respective settings can be defined in the element's properties dialog.

Text area

Multiple lines of text may be entered into text areas. The entry length is not limited. Text areas can only be connected to "Text" data fields. In editor mode, you can use an HTML or Markdown editor to edit text in the browser.

View text area

Like the text area, it can only be connected to data fields with the "Text" data type. It interprets multiline HTML or Markdown text and can also be used to display plain text.

Option field

This element consists of individual options combined in a group. Only one of the options may be selected by the user in the browser. The value of the selected option will be saved as text in the linked data field.

Double-clicking on the group border of the Option field on the workspace opens the properties dialog.

The title and value of each option can be edited by selecting the option and not the group frame on the workspace.

Checkbox

Checkboxes save Boolean values (/true/false or yes/no).

View checkbox

Displays saved Boolean values. Depending on the value, the checkbox will be shown in the browser as selected or deselected.

Slider

If you link this element to a data field, the value selected with the element will be saved in that data field. You can define which values the slider displays in the properties.

Line

This separator element can be used to divide a page.

Grouping

Elements can be grouped together by using the grouping tool. Click here for more information.

Basic controls - Lists

Drop-down list

Drop-down lists will be used to display entries in list format.

Listbox

The listbox offers the same functions as the drop-down list but shows the entries as an open list in the browser.

Multiple selection

Click here for more information about this element.

View multiple selection

Click here for more information about this element.

Multiple selection 2.0 / Multiple selection 2.0 View

Click here for more information about this element.

Sortable list

The order of entries in the sortable list can be changed as you like in the browser via drag & drop. If the sortable list is linked to a data field, an entry can be selected and the value can be saved in the linked data field. If the page, where the sortable list is located, displays an existing data record, then the corresponding saved value will automatically be selected in the list.

View sortable list

Like the sortable list element but without the option of saving a selected value.

Overviews

View table

With a view table, data records will be displayed in table format. For every connected data field, a table column will be created, and for each data record, a row. The sorting of the table can be changed in the browser by clicking on the column header. A view table can display data of the same level, data from superordinate data groups and data from the immediately subordinate data group.

You can learn how to export the data of a view table here.

Free layout table

In free layout tables, application pages can be integrated that are repeated for each data record. You can design the integrated page however you like as long as it does not contain one of the following elements:

• Sortable list

• Research

• Calendar (including additional controls for calendars)

• View table

• Free layout table

• Chart

• Tree (edit and view element)

• Exchange tree

• Gallery

• Exchange file selection (edit and view element)

• File sorting

• Search

• FileWalker

• Navigation

The following functions are not available on pages that are integrated into a free layout table:

• Data Picker action for buttons

• Data mapping for drop-down lists

• Dependencies

Dependencies guide for this is available here. A guide to creating a connection is available here. They cannot be used on pages that are already being used in a free layout table.

You can learn how to export the data from a free layout table here.

Responsive appearance with tiles

The free layout table can be assigned style classes, which can be used to display the page as a "tile".

There are different style classes that display a different number of tiles for S, M and L screen sizes side by side. These style classes are added in the properties dialog of the table on the "Style" tab.

The following configurations are available:

The distance between the individual tiles is always 1%.

Enter the desired style class on the "Style" tab in the "Style class" field with the format "shapedtable-standard <styleclass>" (example: shapedtable-standard ix-s2m5l7).

The style classes can be found in the Design module in the Layout > Control elements > Advanced properties > Responsive area under the "Responsive shaped tables" style node. The node is only visible if the Expert mode has been activated.

Calendar plugin

The Calendar element can be used in every application for planning appointments. More information about the functions of this element in the browser can be found here.

Resource

The Resource element can be used in every application. With this element, resource bookings (e.g. company cars) are presented and managed clearly and double-bookings are avoided. Click here for more information about the functions of this element in the browser.

Overviews - Tree controls

Tree (edit element)

Hierarchical folder structures can be depicted using the Tree element - this can be used for outlines, for example. The folder structure can be adjusted in the browser via drag & drop.

Buttons

The following buttons are located above the tree structure:

"Create root folder"

Create child folder

Edit folder

Delete directory

Add post

Which of these buttons is displayed can be defined in the properties dialog when creating a tree or subsequently via the "Edit" menu when the tree is selected on the workspace.

All tree levels can be shown or hidden with the arrow buttons underneath.

Display values

The "Tree" element is an edit element and comparable to an expanded drop-down list. If all levels of the tree are expanded, all available entries are displayed.

Save value

The "Tree" edit element can be linked to a data field. If an entry is selected in the tree in the browser, the value of the key field of the selected entry can be saved in the assigned data field by clicking on a button with the action "Save", as with other edit elements.

Link destination

For this reason, no jump target can be defined for the "Tree" input element since clicking on an entry in the tree that would execute the jump is used at this point to select the tree entry to be saved.

Select saved value

To display the value saved in the previous section again, the field (or generally the source) containing the ID of the tree entry to be selected is defined on the "Binding" tab in the tree's properties dialog.

More information about this element is available in our Tips and Tricks article "Tree".

View-tree

The same settings can be made for the "View tree" element as for the "Tree" edit element. This element can also be linked to a data field. Because clicking on an entry in the tree is not used to select a value to be saved, as is the case with the edit element, a jump target can be defined for the view element, which is executed when a value in the tree is clicked on.

Exchange tree

Click here for more information about this element.

You have the option to setup a path navigation for both edit and view elements for the tree. In this way, you can navigate through its structure using either the tree control or by entering the path.

Filter

Filter information

This element provides information about the filters currently applied to the dependent element, e.g. when a value selection (drop-down list) filters a dependent view table. The filter information will then display a button with the filter currently active, e.g. Category A or B. Clicking on this button will deactivate the filter.

Value range

With this filter type, the lower and upper limits of a value range can be specified. The filter will be used for the data types "Date", "Date & Time", "Integer", "Currency", and "Floating-point number". It consists of two edit fields where the lower and upper values can be entered. Here you can see both edit fields of the filter in the browser and underneath the view table that is connected with the filter via a dependency.

Value selection (drop-down list)

The values from a drop-down list are selected that filter an element connected via a dependency.

Value selection (open presentation)

With this filter, data sets will also be filtered according to the selected entries but in this case, a listbox will be used as the filter element instead of a drop-down list.

Boolean values

This filter is a checkbox that filters based on the Boolean values (e.g. true/false) in the dependent element. Different modes are available as well.

Operator

This filter control consists of three fields. In the first drop-down list, the data field will be selected whose values should be compared with the entered character string. The operator can be selected in the second list. Depending on the data type of the selected data field, various operators can be selected. The value which should be used to filter the dependent element can be entered in the last field on the right.

Alpha-index

With this filter type, data in the dependent element can be filtered based on a definable index of letter and number groups.

Option field

With this filter type, data in the dependent element will be filtered based on the selected option.

Checkbox selection

With this filter type, data in the dependent element will be filtered based on the selected checkbox(es).

Calendar filter

With the Calendar filter, the data in the dependent element is filtered based on the data selected in the calendar. You can select single dates or entire date periods by selecting multiple dates at once. More information about the settings for the navigation calendar can be found here.

Additional controls for calendars

See all the information about these elements here.

Images and files - Image controls

Image

With this element, a static image of your choice can be saved on the server and displayed in the application. The element can also be used to prevent entries by bots.

Gauges

This element is designed to show speeds, sound level, values of pressure, temperature or toner levels, and so on.

Chart

This view element allows values of an application to be graphically displayed. The chart control provides many different templates, enables the number of data records to be limited, the integration of dependencies, the manipulation of all chart properties, and the ability to export charts as jpg, png, svg, and pdf.

Gallery

The gallery element allows you to easily integrate photo albums into your portal. More information about the element's settings is available by pressing F1 or clicking on the Help button in each of the properties dialogs.

Appearance in the browser

The gallery is displayed in the default view if the "Show gallery in lightbox mode" setting is not set in its properties dialog on the "Data" tab.

If you have not set the "Show navigation and slideshow control buttons initially" setting on the "Options" tab in the gallery properties dialog, no gallery control buttons will be displayed yet when the page is loaded. As soon as you click on the gallery image, all the buttons will appear. Another click on any area in the image hides the buttons again.

The arrow buttons on the right and left of the image can be used to scroll forward and backward through the album. In the center below you will find a smaller version of the images that are included in the album. With a click, these can be selected directly here. On mouse contact with one of the images, a small preview will be displayed above the image.

At the bottom right you will find the Play button which can be used to start the gallery slideshow.

Lightbox mode

The gallery is displayed in the lightbox mode if the "Show gallery in lightbox mode" setting is set in its properties dialog on the "Data" tab.

The images contained there will then be reduced in size and displayed one below the other. Click on one of the images to open the gallery.

Here you will find the same buttons and functions as in the standard view. In addition, the gallery can be closed again by clicking on the close icon in the upper right corner.

Images and files - File controls

File selection

This element allows you to upload files to the server via drag & drop - these can also then be downloaded by other users. Clicking on the element opens the standard dialog where a file can be selected. You can also drag and drop files onto the element or paste images that you have previously copied to the clipboard using the CTRL + V key combination.

File selection view

This view element shows the files that were uploaded using the file selection element.

Exchange file selection for attachments

This control can only be used in Exchange applications. Click here for more information.

Exchange file view for attachments

This control can only be used in Exchange applications. Click here for more information.

File sorting

This element allows the order of files in the browser to be changed via drag & drop. The File sorting element can only be created if the data group contains a file data field.

MS365 OneDrive

With MS365 OneDrive control, you can access Microsoft OneDrive directly from your portal. The usual Microsoft OneDrive functions, such as opening and editing Microsoft 365 files, are then available to you. In the portal, you can also upload files to Microsoft OneDrive or download files from there.

Detailed information is available in the following sections:

• Integrate MS365 OneDrive control into application

• Using Microsoft OneDrive in the Intrexx portal

Search and navigation

Search

Click here for more information about this element.

Research

With the research element, complex queries about the data of an application can be made.

Research link

Shows or hides the research function, respectively. The research function corresponds to the top area without the results table. Here, select a data group and the appropriate operator. Enter the value you are searching for. Multiple comparisons can be connected using an And or Or connection. Click on Search to perform the research. The "New research" button clears the search fields. Click on "Research within a research" to perform a research based on the search results of the first research.

Save research link

This link appears after a research has been performed. The settings used in the research can be saved here. Clicking on the link opens the corresponding page.

"Personal / Global" tab

If you save the research on the "Personal" tab, then it is only available to you. Researches saved on the "Global" tab are available to all portal users.

Category

Click on "New category" to create a new category or "Administrate categories" to edit them. The category selected in the drop-down list is assigned to the research being saved.

Title of new research

Provide the research with a name that describes its results.

Available researches

You can select an existing research here that should be overwritten by the new settings entered here.

Save field settings with research

Applies the field selection and loads this when the current research is loaded later.

Save field settings for export with research

Applies the field selection to the export file when the current research is exported later.

Delete research

Deletes the currently selected research.

"Load research" link

An existing research can be loaded here.

“Options” link

This link opens a page where child data groups can be selected; this means the research is also applied to these. The number of possible comparisons (data field, operator and field) can also be increased here.

You can find out how to export the data from a search results table here.

FileWalker

You can access files on the network with this element. This requires an established connection and sufficient permissions. Click here for more information.

Navigation

This view element allows a user to page through existing data records. The navigation element will give the number of the current data record automatically upon loading the page. It consists of four individual buttons. The view and edit elements of the page on which the navigation element is positioned will be refreshed after each movement and then display the values of the data record to which it has moved.

Path navigation for tree

Click here for more information about this element.

Programming

Static text for programming

Click here for more information about this element.

VTL Include

VTL stands for Velocity Template Language. Velocity is an open source development from the Jakarta Apache Project and allows the direct addressing of Java objects based on an easily learned script language. The place where the VTL Include element is positioned on the workspace is where your VTL file will be executed later. The entire process is comparable to the inclusion of an ASP file with Visual Basic script.

Calculations

The calculation element allows formulas to be used in applications.

Calculation in view tables

Use the calculation wizard to enhance your data with formulae and visuals – such as for a shopping cart, taxes, or participant lists.

A calculation can be configured in view tables. The result of this calculation is shown in a special area underneath the view table such as the total amount.

The calculation area is set in the column configuration of a view table.

Intrexx Share

Intrexx Share comments

This element can be assigned to an Intrexx Share plugin in the properties dialog and then displays the comments for the selected feed. Click here for more information about this topic.

Other controls

Tagging - Bookmarks

The Tagging - Bookmarks edit element allows tags to be set for any kind of entry. In search configurations, you can activate a setting that tags should also be shown in the search results. Please refer to the glossary for more general information on tagging.

View tagging - Bookmarks

Word cloud

Record view

This view element will show the tags that you or other users have entered using the Tagging - Bookmarks element. The element also displays hashtags entered and saved in a text area, if the corresponding setting has been defined in the properties dialog.

Sortable grouping vertical

Elements, which are grouped with sortable grouping, can be moved up/down or right/left, using drag and drop within the sortable grouping. Additionally, an icon in the right hand area of the title bar enables individual sortable elements to be hidden from display in the browser when the information they contain is not required. If you move any element into a sortable grouping on the workspace via drag & drop, a sortable element will be created automatically. This creates another grouping within the sortable grouping. These sortable elements can be moved in the browser and may contain any number of application elements.

Sortable grouping horizontal

The same as the sortable grouping vertical just set up horizontally. The sortable elements it contains can be moved from right to left.

Grids

The grid can be used to develop a page layout that is freely collapsible based on the Foundation Framework. This adjusts itself to the diverse screen sizes of desktops, tablets and smartphones. General information about responsive layouts can be found here. This element can only be used on pages that do not use a table layout. When you place the element onto the workspace, it adjusts itself automatically to the width of the workspace. A grid can contain a maximum of twelve columns where you can arrange the application elements that you would like. The number and width of the columns can be specified in the grid's properties dialog. You can reach the properties dialog by double-clicking on the frame that surrounds the grid element. If you click directly on one of the rows, the ZOOM workspace area will open, this depicts the content of the current column. In this way, even layouts that are more complicated can be edited effectively because you have access to a single workspace per column in the ZOOM area.

Portlet container

Portlets can be made available on application pages with this element. Click here for more information about this element.

Templates

If you drag created elements from the workspace to the Elements area, a dialog will open automatically where the element can be defined as a template. The properties of the element will be transferred to the template. Therefore, if you find that you apply the same configuration to elements again and again, it could be worth creating a template.

You can also drag several elements from the workspace to the "Elements" area at once. To do this, simply select the desired elements on the workspace. After dragging and dropping, a template is created that contains all the selected elements.

If the same page is set as the destination for a group of buttons with the Save, Cancel or Delete action, the buttons can be reused without further adjustment.

You can find the new template in the Template category at the end of the elements list in the "Elements" area. It can now be used to create new elements with the properties of the template. If you would like to delete a template, simply drag it to the garbage bin symbol at the bottom right.

Import / Export templates

Via the context menu "Export templates" or "Import Templates" a dialog opens that can be used to import and export element templates.

Functions for the elements: Sortable list, File selection, View field with control type "Image-URL"