Elements

Create elements

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

This dialog gives you the ability to create a new data field alongside the new element. The element is then automatically linked to the new data field. Data entered into this element will be saved in the linked data field. Click on "Next" afterwards. Help for the subsequent dialogs can be found by pressing F1 or the Help button at the bottom right of the dialog.

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:

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 description

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

  • Show category overview

    With 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

Buttons execute numerous database actions, such as saving and deleting data records. By defining a link destination, the button can load additional pages in the main window, a popup window or in tooltips. Buttons can also be presented as text links and images in the browser.

Static text

This view element will show static text. This text, which can also contain HTML tags, is defined in the properties dialog. The element can also be implemented for programming.

Edit field

Edit fields can be used to record data with different data types and control types. The entry length is limited to 255 characters.

View field

View fields will be used to display data from linked data fields. As with edit fields, various control types can be selected.

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.

Radio button group

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

Groupings

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

Basic controls - Lists

Drop-down elements

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

The multiple selection is made up of two lists. All selectable entries are listed on the left, and all selected entries are listed on the right. The selected entries are stored in the linked data field when the page is saved.

The arrow buttons to the top right or left of the list titles can be used to move the currently selected entry from one list to the other. This can also be done by double-clicking on an entry. You can also select multiple entries by holding down the CTRL key.

The multiple selection can be configured to get its entries from, for example, an ID or GUID but display a different value from the same data group. For example, article numbers could be used as entries and the article description could be displayed instead.

Furthermore, you have the ability to set up a so-called selection filter, depicted by images that you can select freely, which will be shown above the entries. Clicking on an image activates the filter accordingly.

The values that have been entered with a multiple selection can be shown with the view elements view multiple selection and view table.

To support a "contains" filter for the search in the multiple selection, the setting control.distribution.list.searchContainMode=true needs to be defined.

Users and groups

With this setting, the multiple selection will be used for the selection of users, user groups, and additional objects from the User Manager.

You can search for terms and filter the list of user objects. You can define which data should be used for the search in the schema manager. Activate the setting "Use in User manager search" for the corresponding attributes.

The selection filter - filter buttons above the user lists - allows you to restrict or expand the search to users, user groups, distribution lists, organizational units and roles, depending on whether the corresponding button is activated or deactivated.

When you save the data record, the GUIDs of the user objects will be saved to the linked data field. New distribution lists can be created by clicking on "Create distribution list" provided the "Create distribution list" has been activated in the properties of the multiple selection element.

The structure of the User Manager will be shown here. Select where the new distribution list should be created and click on "Save".

Provide the new distribution list with a name and description here. The members of the distribution list can be defined underneath. Click on the button to the right to do that.

Select the desired member(s) here and click on "Save".

Go to the "Access permissions" tab.

You can define which users and/or objects from the User Manager will be allowed to change the recently created distribution list. Click on the button to the right to select the corresponding users. The new distribution list will be available in the Users module once you click on "Save".

Click on to edit an existing distribution list.

View multiple selection

Displays values from text fields or subordinate data groups. More information is available in the description of the multiple selection 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.

Free layout table element

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:

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

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.

Responsive appearance with tiles

Style classes can be assigned to free layout tables as of Intrexx Version 21.03 from Online Update 04, allowing the integrated page to be displayed 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:

Style class

Appearance

.ix-l2

S= one tile at full width

M= one tile at full width

L=two tiles side by side at 49.5% width

.ix-m2l2

S= one tile at full width

M=two tiles side by side at 49.5% width

L=two tiles side by side at 49.5% width

.ix-m2l3

S= one tile at full width

M=two tiles side by side at 49.5% width

L=three tiles side by side at 32.66% width

.ix-m2l4

S= one tile at full width

M=two tiles side by side at 49.5% width

L=four tiles side by side at 24.25% width

.ix-m3l5

S= one tile at full width

M=three tiles side by side at 32.66% width

L=four tiles side by side at 19.2% width

.ix-s2m4l6

S=two tiles side by side at 49.5% width

M=four tiles side by side at 24.25% width

L=six tiles side by side at 15.66% width

.ix-s2m5l7

S=two tiles side by side at 49.5% width

L=five tiles side by side at 19.2% width

L=seven tiles side by side at 13.4285% width

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. Der Knoten ist nur sichtbar, wenn Sie den Expertmodus aktiviert haben.

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.

Grouping field

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

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 folder

Add post

Welche dieser Schaltflächen angezeigt wird, kann im Eigenschaftendialog bei der Anlage eines Baums oder nachträglich über das Hauptmenü "Bearbeiten" festgelegt werden, wenn der Baum auf der Arbeitsfläche selektiert ist.

Mit den darunter liegenden Pfeilschaltflächen können alle Baum-Ebenen ein- bzw. ausgeblendet werden.

Werte anzeigen

Das Element "Baum" ist ein Eingabeelement und vergleichbar mit einer aufgeklappten Auswahlliste. Sind alle Ebenen des Baums aufgeklappt, so werden alle verfügbaren Einträge angezeigt.

Wert speichern

Das Eingabeelement "Baum" kann mit einem Datenfeld verknüpft werden. Wird im Browser ein Eintrag im Baum ausgewählt, so kann, wie bei anderen Eingabelelementen, mit Klick auf eine Schaltfläche mit der Aktion "Speichern" der Wert des Schlüsselfeldes des gewählten Eintrags in das zugeordnete Datenfeld gespeichert werden.

Destination

Aus diesem Grund ist beim Eingabeelement "Baum" kein Sprungziel definierbar, da der Klick auf einen Eintrag im Baum, der den Sprung ausführen würde, an dieser Stelle für die Selektion des zu speichernden Baumeintrags verwendet wird.

Gespeicherten Wert selektieren

Um den im vorherigen Abschnitt gespeicherten Wert wieder anzuzeigen, wird im Eigenschaftendialog des Baumes auf dem Reiter "Binding" das Feld (oder allgemein die Quelle), das die ID des zu selektierenden Baumeintrags enthält, definiert.

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

View tree

Für das Element "Baum Ansicht" sind dieselben Einstellungen möglich wie für das Eingabeelement Baum. Auch dieses Element kann mit einem Datenfeld verbunden werden. Da der Klick auf einen Eintrag im Baum nicht wie beim Eingabeelement für die Selektion eines zu speichernden Wertes belegt ist, kann beim Ansichtselement ein Sprungziel definiert werden, das bei Klick auf einen Wert im Baum ausgeführt wird.

Exchange tree

Click here for more information about this element.

Path navigation for tree

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.

Radio button group

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 of the navigation calendar can be found here.

Additional controls for calendars

The additional controls for calendars, aside from the recurring appointment element, can only be used if the current page contains a calendar or resource element.

Previous/Next

This additional control inserts two grouped button elements that enable navigation through the calendar. If multiple calendar or resource elements are on the current page, a dialog opens when the Previous/Next element is created, allowing the control to be assigned to the desired calendar.

View selection

This element allows you to switch change the view of the calendar or resource element, such as from the daily to weekly or monthly view.

Calendar filter

This additional control displays a small calendar that can help select a date in the chart of a calendar or resource element. More information about the settings of the navigation calendar can be found here.

Date display area

This element displays the current date in the calendar. The title is formatted depending on the view selected by the user.

Appointment series

This allows appointment series to be created. This element is used on edit pages. In the browser, a corresponding link will be shown which allows the users to configure an appointment series. Click here for more information.

Plugin selector

The plugin selector allows users to subscribe or unsubscribe in the browser to calendar plugins from other applications.

Legend

Appointments can be categorized by users. The legend lists these categories with their corresponding background and font color. A category is only shown here if an appointment was assigned to it.

Selection of resources

With this additional control, you see a list of all resources in the browser that were created in a resource application. The resources can be unselected from this list if you, for example, want to reduce the complexity of your resource chart. Hidden resources can be reselected when required. Click here for more information.

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

With the gallery, you can integrate image galleries into your portal applications with ease. More information about the element's settings is available by pressing F1 or clicking on the Help button in each of the properties dialogs.

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.

View file selection

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.

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.

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.

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.

An existing research can be loaded here.

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.

FileWalker

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

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

This element is a static text element for which the properties have been defined as such that the specified text is interpreted as a Velocity script which is performed when the element is loaded in the browser.

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.

To use this element, you need to have experience with scripting languages and ideally also in Java development. United Planet does not provide any support for the use of VTL in Intrexx.

Calculations

The calculation element allows formulas to be used in applications.

Calculation in view tables

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.

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

Context menu: "Export templates"
Opens a dialog where templates can be selected for export.

Context menu: "Import templates"
Opens a dialog where previously exported templates can be selected for import.

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

 

 

Sortable list

Image selection

Image URL

 Edit

View

Edit

View

 

Display link to image in full size-

-

+

+

+

Rotate images in original size-

-

+

+

-

Rotate images+

+

+

+

-

Maximum size (Width / Height)+

+

+

+

+

Crop image

+

+

+

+

-

Optimize file size for thumbnails (reduce)

+

+

+

+

-

Adjust control size to maximum size

-

-

-

+

+