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.

Switch to the edit page and add an edit field with the Date control type. While you are still on the edit page, create a view page via the New menu / View page with elements.

This view page called "Appointment details" will be integrated into a free layout table later. So that the records do not take up too much space per row when they are presented in the table, we have removed the labels of both the Date and Title view fields and positioned the two view fields in one line. Additionally a button has been created with the Text button type and Edit as its title.

Activate the Expert options. Then open the properties dialog of the button 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

## 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)

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 from the Application structure area.

Now switch to the "All Entries" page. Remove the view table there and create a free layout table instead. Then open the properties dialog of the table. Integrate the "Appointment details" view page on the Data tab. Close the properties dialog with OK and save the application. Open the portal and the application in the browser.

You can see that the Edit button - as defined in the conditional display - is only shown next to the data record with a date greater than the current date (24/01/2020 in this example).