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
main menu: New / 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 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 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.
Here you can see that the Edit button - as defined in the conditional display -
is only visible for the data records whose defined date is greater than
the current date (16/11/2017 in this example).