Advanced Techniques - 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 the application

Create an 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
$CalHelper.init($Request)

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

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

## Identify current time
#set($Now = $CalHelper.getNowCalendar($TZ))

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

## Compare the date values. Please note: getTime() needs to
## be performed twice on CalendarObject 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 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).