Tips & Tricks - Button Icons When Showing and Hiding Groups

This post demonstrates how a custom application style can be used with "Text" buttons to show and hide groupings. Depending on whether the group is currently shown or hidden, the button link will display different images in the browser.

Create an Application

In the Applications module, create a new application using the Basic Application template. Select the third row of the grid on the "All Entries" page and switch to the zoom section.

There is a group there that contains the table. Create a new button titled "Show/Hide." Go to the "Actions" tab and select the "Show/Hide" action. The group should already be selected automatically here. The button is created when you click "OK."

You can now create a new style for the button via the main menu: "Edit / Edit Layout / Edit Layout. "

Below "OK Buttons" in the "Controls" section, you'll find additional styles that you may need to display by clicking the arrow icon to the left of "OK Buttons." Then select the "Link" entry and choose the "Edit / Add Control" menu.

Enter "ViewHideButton" for both Class and Title, and click "OK."

Select the "ViewHideButton" entry, and then choose the "Edit / Add CSS Rule" menu option.

Enter the selector

            .ViewHideButton, .ViewHideButton:link[aria-expanded="false"]
        

and enter the title "ViewHideButtonExpandedFalse." Click "OK."

Select the new entry "ViewHideButtonExpandedFalse".

You can now edit the CSS in the element settings on the right side of the screen. Click "Styles" below, and then select "Show CSS Properties in the Editor" under " " at the top.

Enter the following CSS:

            .ViewHideButton,
.ViewHideButton:link[aria-expanded="false"]
{
	vertical-align: middle;
	padding: 2px 0 2px 20px;
	background-attachment: scroll;
	text-align: left;
	font-style: normal;
	font-size: 11px;
	background-repeat: no-repeat;
	background-image: url(../../../images/assets/common/size-toggle-2.png);
	background-position: left;
}

        

Save the CSS by clicking "Save CSS" in , and then click "OK."

In the same way, we now need to add a second CSS rule with the selector

            .ViewHideButton, .ViewHideButton:link[aria-expanded="true"]
        

and named "ViewHideButtonExpandedTrue." For this second rule, enter the following CSS:

            .ViewHideButton,
.ViewHideButton:link[aria-expanded="true"]
{
	vertical-align: middle;
	padding: 2px 0 2px 20px;
	background-attachment: scroll;
	text-align: left;
	font-style: normal;
	font-size: 11px;
	background-repeat: no-repeat;
	background-image: url(../../../images/assets/common/size-toggle-1.png);
	background-position: left;
}

        

Save the CSS, and then click "OK."

Now you can assign the new style to the button in the Properties dialog box on the "View" tab. To do this, click "Edit Style Class" at .

Select "[Application]" as the layout, and then select the "ViewHideButton" style you just created. Close all dialog boxes by clicking "OK" and publish the application. Test the result.