Tips & Tricks - Conditional display

This workshop will demonstrate how to integrate a button into a free layout table and then to determine whether the button is visible there based on the date using the conditional display.

Create an application

Create a new application based on the "Basic application" template.

An input field with the control type "Date & Time" is created on the input page. To do this, the zoom area can be opened by double-clicking in container 1, which also contains the "Title" input field.

You can find out how to create elements here.

Switch back to the workspace by clicking on the corresponding tab next to the zoom tab.

Then create a view page via the context menu "New / View page" in the data group.

This view page with the title "Details appointment" will later be integrated into a freely designed table. Create both the "Date" and "Title" view fields which are connected with the data fields of the same name, and arrange them in a single row. A button with the title "Edit" is also created. The entry page can be set as a Link destination for the button.

Next activate Expert options. Open the button’s properties dialog and click on "Options" on the "General" tab. Activate the option "Display if condition met" and then open the Velocity Editor by clicking on Edit condition. Add the following script there.

            ## Initialize CalHelper
$CalHelper.init($Request)

## Do not show button by default
#set($show_buttoncontrol5776AA58 = false)

## Get timezone of the current user
#set($TZ = $User.getTimeZone())

## Get current date
#set($Now = $CalHelper.getNowCalendar($TZ))

## Read value from data set (view control on page) within the table structure of the overview page
#set($To = $drRecord.getValueHolder("datecontrol2AEFE7BE").getValue())

## Comparison of the date values. Please note: getTime() has to be executed twice
## on CalenderObject to get ms value

#if($Now.getTime().getTime() < $To.getTime())
#set($show_buttoncontrol5776AA58 = true)
#end

        

Replace "buttoncontrol5776AA58" with the name of your button and "datecontrol2AEFE7BE" with the name of your "Date" view field. Both names can be identified in the editor in the "Application structure" area.

Now switch to the "All Entries" page. Remove all the elements there and create a Free layout table. Open the properties dialog of the table. Integrate the "Appointment details" view page on the "Data tab".

Integrate the input page "Input" via the context menu "Properties" in the application node in the Application menu, so that you can add data records in the browser later.

Click "OK" to close the properties dialog and save the application. Open the portal and the application in the browser.