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