Controlling Visibility of Elements in TUIX

Many things in TUIX (e.g. buttons, fields or navigation) can be conditionally shown using visible_if and other similar properties.

These properties accept a snippet of JavaScript code. If you set them, the CMS will try to run the code, and show or hide the object depending on whether the code returns true or false.

General examples

A few examples that you can use everywhere are:

!zenario.browserIsIE()

Do not show something in Internet Explorer

!zenario.browserIsIE(7)

Do not show something in Internet Explorer versions 7 or earlier

zenarioA.siteSettings.my_setting

Only show something when a Site Setting is enabled. (But note that only numeric Site Settings are available in JavaScript.)

Admin Box examples

These examples will work for tabs and fields in an Admin Box using the visible_if property:

zenarioAB.editModeOn()

Only show a field in an Admin Box when a tab is in edit mode.

!zenarioAB.editModeOn()

Only show a field in an Admin Box when a tab is in view mode.

zenarioAB.focus.key.cType == 'html'

Show or hide a field or tab in an Admin Box depending on a value in the key of the Admin Box.

zenarioAB.value('my_checkbox')

Show or hide a field or tab in an Admin Box depending on whether a checkbox on the current tab has been checked.

zenarioAB.value('my_field') == 'value'

Show or hide a field or tab in an Admin Box depending on the value of a field on the current tab.

zenarioAB.value('my_field', 'my_tab') == 'value'

Show or hide a field or tab in an Admin Box depending on the value of a field on a specific tab.

Admin Toolbar examples

These examples will work for buttons on the Admin Toolbar using the visible_if property:

zenarioA.slotWandOn

Only show a button when empty slots are shown.

!zenarioA.slotWandOn

Only show a button when empty slots are not shown.

zenarioA.showGridOn

Only show a button when the grid shown.

!zenarioA.showGridOn

Only show a button when the grid is not shown.

Organizer examples

These examples will work for collection buttons in Organizer using the visible_if or disabled_if properties:

zenarioO.view_mode == 'list'

Only show a button in list view.

zenarioO.view_mode == 'grid'

Only show a button in grid view.

zenarioO.view_mode == 'hierarchy'

Only show a button in hierarchy view.

Organizer item button examples

These examples will work for item buttons in Organizer using the visible_if_for_all_selected_items, visible_if_for_any_selected_items, disabled_if_for_any_selected_items or disabled_if_for_all_selected_items properties:

item.lock_owner_id == 0

Only show a button for content items that are not locked.

item.status == 'first_draft'

Only show a button for content items on their first draft.

('' + item.status).match(/draft/)

Only show a button for draft content items.