3-Column Tiles with Buttons Repeating Group

Overview

This block includes a 3-column tiles repeating group that is fully-responsive. Each tile includes a small circular image, title text, 3 lines of text, an ellipsis menu, and two action buttons. This block is ideal for showing a list of contacts or companies.

Structure

• When this block is added to a page, it is placed within a group called Blocks container 860 (do not rename) on the page. This group contains the responsive settings for all blocks.

• All data is displayed in RepeatingGroup Dummy

• Group Main 3-column tiles with buttons contains three main groups:

  • Group Main header includes the title text and a collapsible description text (Group Collapsible header description text). It also includes an ADD button (Group Responsive header button) that is currently hidden. To unhide, remove the hiding rule on the group in the responsive editor view.

  • Group Inner tiles container includes the repeating group. Users can click on menufocusgroup_template to open an ellipsis menu.

    • You can add workflows to Group Inner add friend button and Group Inner message button.

  • Group Collapsible no results will show when the repeating group has 0 items.

• This block includes various PLACEHOLDER groups. You can resize these groups to add more elements to the groups. If you do modify the content of any of the groups above, please ensure no elements are overlapping as any overlapping elements will affect responsiveness.

How to set up

• Update the data source of RepeatingGroup Dummy

• Update the data source of the image and texts

• If needed, unhide Group Responsive header button to reveal the ADD button (you can remove the hiding rule on the group in the responsive editor)

  • Add workflow to the ADD button

• Remove any elements in the block that you do not need

• Add workflows to Group Inner add friend button and Group Inner message button.

• If needed, add a conditional statement to Group Inner tile menu

  • For example, you might only want this ellipsis menu to show when the current user is an app admin

    • To do this, you would uncheck the box on the group for This element is visible on page load. You would add a conditional statement that says when current user's role is app admin then this element is visible [checked].

  • Go to menufocusgroup_template reusable element to update the menu options. Add workflows to Group option 1/2/3/4/5.