How to add a progress bar in a grid column?

[S_Elsayed]

Hello community.

I would like to have a progress bar as a column in a grid widget based on a percentage value from 0-100, how can I do that?

I am aware that progress bars could be done by a shape widget, so perhaps it could be possible to have a column as a shape that can take a value?

The goal is to have the grid look like this:

Thank you in advance!

[Velkumar]

Hi @S_Elsayed 

You can use the collection widget as a Table to place a progress bar/shape. We cannot place a progress bar/shape in the Grid Widget.

/VR

[S_Elsayed]

Thank you Velkumar.

Could you please elaborate on how I can use a collection widget for this? There are many configurations for the collection widget, so I am not quite sure how to use it even after checking out the docs.

[Velkumar]

Hi @S_Elsayed 

Check here for the collection widget property definitions - Collection Widget (ptc.com)

To make the collection widget look like a Table / Grid.

In Collection Property, set View as 'Table'

Set your mashup height as per requirement. 

Mashup will look like this in runtime :

/VR

[S_Elsayed]

Thank you again @Velkumar for your help.

Would you mind sending me a link to this mashup, or walk me through the configuration and bindings you used please? Since I am facing some issues in making it look similar to this, even after setting view as "table". 

[Velkumar · Accepted solution]

Hi @S_Elsayed 

Sure I will upload project entities so you can import them in your env.

Please follow the below steps :

1. Create a ParentMashup and place header label and collection widget

2. Create ChildMashup for collection widget with Label and Shape Widget

Note: DO NOT CALL ANY SERVICE OR CREATE ANY FUNCTION IN CHILD MASHUP.  (Which will affect the performance of the app )

3. Create Mashup Parameters in ChildMashup. Mashup Parameters will pass data from ParentMashup to ChildMashup

More about Mashup Parameters -  Configuring Mashup Parameters (ptc.com) 

4. Bind Mashup Parameters to Shape Widget and Label 

5. Enable Dynamic filling in Shape Widget and Set Dynamic filling maximum limit 

6. In parent Mashup, pass data to the collection widget from your service

7. Set Mashup property value as your childMashup which you created in step 2

8. Set UID Field which should be unique for each row. In my example I have set rowNumber as UIDField which is unique for each row

9. Configure Mashup Parameter JSON to pass data from service to childMashup

In Mashup Parameter JSON, the key should be dataFieldName from Service and the value should be Child Mashup Parameter name

10. Set Mashup height to 60px (each row height) and View Type to Table in the Collection Widget property

The result should look like this :

I have attached example entities for your reference.

/VR

[S_Elsayed]

Hi @Velkumar 
Thank you so much for the detailed steps! I am able to create that table now. I greatly appreciate it.

[S_Elsayed]

Hi @Velkumar 

Apologies, I have one last question.

Is there a way to style the collection cells, something like this?

I was testing the Style Properties in the parent mashup, but it made no difference:

Thank you for your time.

[Velkumar]

Hi @S_Elsayed 

Could you please explain a bit more? What exactly do you want to do?

/VR

[S_Elsayed]

Hi @Velkumar 

As you can see in the image below, the collection widget table here has no styling, no cell colors, no borders, etc.

I want to make it look more like a table, preferably something similar to the image below:

I tried to edit the Style properties, but it made no difference:

Is there a way to style the collection widget to make it look more like the table above?

Thank you.

[Velkumar]

Hi @S_Elsayed 

Please follow the below steps :

1. Remove the background color for all containers in the child mashup

2. Add border to top-level container in child mashup

3. Set alternate style definition in collection widget style property

It should look like this :

/VR

[S_Elsayed]

Great! Thank you so much for your time @Velkumar