Tips & Tricks - Conditional display

In this article you will learn how to integrate a button into a freely designed table and how to show or hide it depending on a date using the conditional display.

Create an application

Create an application with 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 "New / View page" context menu for the data group.

This view page with the title "Details appointment" will later be integrated into a freely designed table. Create the two view fields "Date" and "Title", which are linked to the data fields of the same name, and arrange them in a single line. A button with the title "Edit" is also created. The input page can be set as the jump target for the button.

Then activate the options for experts. Open the properties dialog of the button and click on "Options" on the "General" tab. Activate the conditional display and 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 determined in the editor in the "Application structure" area.

Then switch to the "All entries" page. Remove all elements located there and create a freely designed table. open the properties dialog of the table. Include the "Appointment details" view page on the "Data" tab.

Include the "Entry" input page via the "Properties" context menu of the application node in the application menu so that you can enter data records later in the browser.

Close the properties dialog by clicking on "OK" and save the application. Open the portal and the application in the browser.