How can I add whole repeating layout vertically
Hello,
I am trying to add repeating layout to section based on page list.
For example, I have created a page list property called "CustomerList" under XYZ-Sandbox-Work-MyCase class which points to XYZ-Sandbox-Data-Customer class. Then I have created a section in XYZ-Sandbox-Data-Customer class.
I want this whole section to be addable by user operation (clicking + button) so that he or she can fill in multiple customer information.
When I use Dynamic Layout Group, I was able to do this, but it is horizontal with tab basis (please see below), and also I seem not to be able to delete the added section. I remember I was able to do this vertically long time ago, probably back in 7x days, but I am not sure.
Am I missing, or should I use different component? Please let me know.
- Layout is added horizontally with tab
- My configuration
Regards,
Accepted Solution
Updated: 23 Nov 2023 3:53 EST
Pegasystems Inc.
JP
Repeating Dynamic Layout can repeatedly display a whole section vertically if Page List is populated. However, adding / deleting a whole section is not out-of-the-box. You need to build it yourself. Here are the steps.
1. Create a Data-Customer class.
2. Create a Page List property called "CustomerList" in a Work- class that points to Data-Customer class.
3. Create a section in Data-Customer class.
4. Create a section in Work- class and configure Repeating Dynamic Layout. Specify CustomerList Page List property and include the section you created in step 3.
Repeating Dynamic Layout can repeatedly display a whole section vertically if Page List is populated. However, adding / deleting a whole section is not out-of-the-box. You need to build it yourself. Here are the steps.
1. Create a Data-Customer class.
2. Create a Page List property called "CustomerList" in a Work- class that points to Data-Customer class.
3. Create a section in Data-Customer class.
4. Create a section in Work- class and configure Repeating Dynamic Layout. Specify CustomerList Page List property and include the section you created in step 3.
5. At this point, if Page List property is populated, Repeating Dynamic Layout works as below. However there is no out-of-the-box adding / deleting function.
- How to build adding functionality
1. Drag and drop "Image" to your preferred location. In this example, I used top right space.
2. Pick any icon. In this example, I picked "Add Item".
3. On click event, refresh section and call Data Transform that appends a new page.
- How to build deleting function
1. Drag and drop "Image" to your preferred location.
2. Pick any icon. In this example, I picked "Delete Item".
3. On click event, configure Delete Item.
- Tips
It is better to visually separate each section so end user can quickly understand it is repeated. There are many ways to do this, and here is just one example using Skin rule. I created a custom container format as below.
Here is the final output image. Adding / deleting function works fine.
Thanks,
Pegasystems Inc.
US
@CloeW938first, you may want to consider working with an Embedded Data property. That way Pega would take care of the entire logic and all associated views, making your app easier to maintain.
If you need more control, create a new view on your data object, then reuse that view in a section of your work class using a repeating dynamic layout. This way you'll have full control over how fields are arranged. Pega will default to a stacked layout, meaning all fields will be arranged vertically.
Finally, here is the result:
Accepted Solution
Updated: 23 Nov 2023 3:53 EST
Pegasystems Inc.
JP
Repeating Dynamic Layout can repeatedly display a whole section vertically if Page List is populated. However, adding / deleting a whole section is not out-of-the-box. You need to build it yourself. Here are the steps.
1. Create a Data-Customer class.
2. Create a Page List property called "CustomerList" in a Work- class that points to Data-Customer class.
3. Create a section in Data-Customer class.
4. Create a section in Work- class and configure Repeating Dynamic Layout. Specify CustomerList Page List property and include the section you created in step 3.
Repeating Dynamic Layout can repeatedly display a whole section vertically if Page List is populated. However, adding / deleting a whole section is not out-of-the-box. You need to build it yourself. Here are the steps.
1. Create a Data-Customer class.
2. Create a Page List property called "CustomerList" in a Work- class that points to Data-Customer class.
3. Create a section in Data-Customer class.
4. Create a section in Work- class and configure Repeating Dynamic Layout. Specify CustomerList Page List property and include the section you created in step 3.
5. At this point, if Page List property is populated, Repeating Dynamic Layout works as below. However there is no out-of-the-box adding / deleting function.
- How to build adding functionality
1. Drag and drop "Image" to your preferred location. In this example, I used top right space.
2. Pick any icon. In this example, I picked "Add Item".
3. On click event, refresh section and call Data Transform that appends a new page.
- How to build deleting function
1. Drag and drop "Image" to your preferred location.
2. Pick any icon. In this example, I picked "Delete Item".
3. On click event, configure Delete Item.
- Tips
It is better to visually separate each section so end user can quickly understand it is repeated. There are many ways to do this, and here is just one example using Skin rule. I created a custom container format as below.
Here is the final output image. Adding / deleting function works fine.
Thanks,
Self
IN
@KenshoTsuchihashi how can we add image picker in repeating dynamic layout ?
because we can added only pagelist related section.
Self
IN
- How to build adding functionality
1. Drag and drop "Image" to your preferred location. In this example, I used top right space.
here how can we added image in repeating dynamic layout ?
because in in repeating dynamic layout pagelist related section only can add right?
so how you added that "Image"?
Self
IN
@KenshoTsuchihashi But when I used one more layout in same section for that adding item image it's worked. Really its great solution with awesome explanation. (I was looking for the same year ago but I was not able to find correct one.)
Thanks @@KenshoTsuchihashi