# Product Details Group With Progress Bar

## Overview

![](https://47992944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7QCQzQXopA53eLQUo8SB%2Fuploads%2F3uSKlrfefmz4mSDIBu9w%2Fproduct1.png?alt=media\&token=a4d03a4c-ff05-4fa5-b8db-584eb1a9bf66)

This fully-responsive block includes tags, a button (with additional options in a menu focus group), and a progress bar. It is ideal for displaying a list of fields on an object. No workflows are associated with this block.

## 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.
* **Group listingDetailsWithButtonProgressBar** contains three main groups:
  * **Group Main header** - This group contains a title and a button reusable element called **new\_buttonwithmenufocusgroup**. In the reusable element, clicking on Group More will toggle the menu focus group.
  * **Group Inner details content** contains disabled multidropdown tags and a line of description text. You can add additional UI components to the group by resizing **Group PLACEHOLDER 1**. Please ensure the placeholder group is not overlapping with any other elements.
  * **Group Collapsible progress** contains a title text, body text, and a progress bar. You can add additional UI components to the group by resizing **Group PLACEHOLDER 2**. Please ensure the placeholder group is not overlapping with any other elements.

## How to set up

* Go to **new\_buttonwithmenufocusgroup** reusable element and add a workflow to **Button Actions**. Show or hide options groups in GroupFocus button. Add workflows to the options groups in the workflows tab.

![](https://47992944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7QCQzQXopA53eLQUo8SB%2Fuploads%2F6htG2vQnYc7xR5AFcW33%2Fproduct2.png?alt=media\&token=db41fd47-0502-486d-95d8-9cf4388052a3)

* Update the data sources of text elements, multidropdowns, and the progress bar