# How do I configure a non-tabular list of selectable data objects in Constellation?

**URL:** <https://forums.pega.com/t/how-do-i-configure-a-non-tabular-list-of-selectable-data-objects-in-constellation/8491>\
**Category:** User Experience\
**Tags:** crm-manager-tools, 24-1-1, consumer-services, user-experience, constellation, data-integration, senior-system-architect\
**Created:** [October 21, 2024, 10:32pm UTC](https://forums.pega.com/t/how-do-i-configure-a-non-tabular-list-of-selectable-data-objects-in-constellation/8491 "2024-10-21T22:32:54Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![GraftonL17181530](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/graftonl17181530/32/14793_2.png) [@GraftonL17181530](https://forums.pega.com/u/GraftonL17181530)\
**Post date:** [October 21, 2024, 10:32pm UTC](https://forums.pega.com/t/how-do-i-configure-a-non-tabular-list-of-selectable-data-objects-in-constellation/8491/1 "2024-10-21T22:32:54Z")

</div>

I need to display a list of items from a dessert product inventory for the user to make selections from to process an order. The goal is to match the diagram in the attached image. This could be achieved relatively easily in Traditional UI with a repeating dynamic layout, and some local actions, but on Constellation I can so far only choose between a table and a plain field group.

I currently have a List data page “D\_GetItems” to retrieve the data from an external database, and I’ve been able to achieve the table display in the attached image. However, the tabular format is obviously not user-friendly for this use-case (having an image of the product from a URL is a must). Additionally, the “Item Inventory” property is set to be sourced from the GetItems data page, and the system automatically assigns it the Query type.

Ideally, the user will be able to select their items from the externally sourced list and set the quantity, then a data transform will copy those items into the “Selected Items” list, which can be used to calculate the order total and can be displayed on a review/payment screen. So far, a field group is not working with the REST Connector and also has no checkbox to select items.

 ![Tabular Display Example.png](https://pega1.discourse-cdn.com/pega/original/2X/1/184150bc2a795daed599f0e07384328341529445.png)

 ![Targeted Experience Diagram.png](https://pega1.discourse-cdn.com/pega/original/2X/8/81e4f3653a3fcc348c458b5235bfaf1f35cfcaa6.png)

---

<div class="post-metadata">

**Author:** ![Aditi\_Mehta](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/aditi_mehta/32/9204_2.png) [@Aditi\_Mehta](https://forums.pega.com/u/Aditi_Mehta)\
**Post date:** [October 23, 2024, 12:07pm UTC](https://forums.pega.com/t/how-do-i-configure-a-non-tabular-list-of-selectable-data-objects-in-constellation/8491/2 "2024-10-23T12:07:45Z")

</div>

@GraftonL17181530

Existing pattern only supports tabular structure for data reference fields. We can use custom components from UI galley to extend the behavior. Please refer to this article - [Compare and Select Pattern](https://support.pega.com/discussion/how-implement-compare-and-select-pattern-constellation-ui) for more details.

---

<div class="post-metadata">

**Author:** ![RameshSangili](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/rameshsangili/32/23377_2.png) [@RameshSangili](https://forums.pega.com/u/RameshSangili)\
**Post date:** [October 24, 2024, 1:38am UTC](https://forums.pega.com/t/how-do-i-configure-a-non-tabular-list-of-selectable-data-objects-in-constellation/8491/3 "2024-10-24T01:38:27Z")

</div>

@GraftonL17181530

This can be implemented using Pega DX component similar to Card Gallery. Please find the example

> **[storybook - Storybook](https://pegasystems.github.io/constellation-ui-gallery/?path=%2Fdocs%2Fwidgets-card-gallery--docs)**

---

<div class="post-metadata">

**Author:** ![GraftonL17181530](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/graftonl17181530/32/14793_2.png) [@GraftonL17181530](https://forums.pega.com/u/GraftonL17181530)\
**Post date:** [October 28, 2024, 2:20pm UTC](https://forums.pega.com/t/how-do-i-configure-a-non-tabular-list-of-selectable-data-objects-in-constellation/8491/4 "2024-10-28T14:20:26Z")

</div>

@Aditi Mehta

Thank you for your response. I had to do some reading on custom DX Components, but that linked article is quite interesting!

---

<div class="post-metadata">

**Author:** ![GraftonL17181530](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/graftonl17181530/32/14793_2.png) [@GraftonL17181530](https://forums.pega.com/u/GraftonL17181530)\
**Post date:** [October 28, 2024, 2:25pm UTC](https://forums.pega.com/t/how-do-i-configure-a-non-tabular-list-of-selectable-data-objects-in-constellation/8491/5 "2024-10-28T14:25:02Z")

</div>

@RameshSangili

Thank you for your answer, I had to read up a lot on Constellation DX API and now understand the situation better.

Unfortunately, as I am currently working out of Community Edition (which lacks a command line and accessible file system), I believe I will not be able to implement the behavior in my current environment. However, I appreciate knowing how I could make this work in the future!

---

<div class="post-metadata">

**Author:** ![MandeepRawat](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/mandeeprawat/32/9896_2.png) [@MandeepRawat](https://forums.pega.com/u/MandeepRawat)\
**Post date:** [November 5, 2024, 5:00am UTC](https://forums.pega.com/t/how-do-i-configure-a-non-tabular-list-of-selectable-data-objects-in-constellation/8491/6 "2024-11-05T05:00:53Z")

</div>

@GraftonL17181530 you can setup the dx component builder on your local machine and then push those dx components in your community edition as well. It works.

---

<div class="post-metadata">

**Author:** ![MuhammadN17294368](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/muhammadn17294368/32/13899_2.png) [@MuhammadN17294368](https://forums.pega.com/u/MuhammadN17294368)\
**Post date:** [November 5, 2024, 12:55pm UTC](https://forums.pega.com/t/how-do-i-configure-a-non-tabular-list-of-selectable-data-objects-in-constellation/8491/7 "2024-11-05T12:55:29Z")

</div>

@GraftonL17181530 To configure a non-tabular list of selectable data objects in Constellation, use a “Field Group List” control. Define the data objects and configure the layout to display them in a selectable format, such as a grid or card layout, depending on your UI design requirements.
