Have a progress bar within a grid

Question

Hi, I wonder if it is possible to add a progress bar like this in a grid? If so, I wonder what will determine the progress... 
 
 Also, for the graph, it is a priority graph. The dot is able to be moved by drag and drop. I wonder if there is anything in Appian that can be used for it? 
 
 Many thanks for reading! 
 Eric

hiennguyen · Answer

Hi erics171 , 
 For the first question you can use the progress Bar component inside an editable grid. 
 For the second question you can probably use the a!webContentField (Appian >= 18.2) and embedded a third party tool and if you need to pass dynamic data to the tool you can dynamically do it in the source URL 
 Hope this help

Vincent Mark · Answer

erics171 To answer the first question, YES it is possible to add a progress bar in an Editable Grid. The progress bar value is set in your data (a value between 0 and 100). As for the drag and drop grid, I do not believe there is an Appian out of the box (OOTB) feature available for that function. 
 
 load(
 local!goals: {
 {
 goal: "Finish Graduate Project",
 dueDate: date(
 2018,
 11,
 9
 ),
 progress: 50,
 status: "Open",
 startDate: today()
 },
 {
 goal: "Write a blog",
 dueDate: date(
 2018,
 11,
 9
 ),
 progress: 24,
 status: "Open",
 startDate: today()
 }
 },
 a!gridLayout(
 headerCells: {
 a!gridLayoutHeaderCell(
 label: "Goals"
 ),
 a!gridLayoutHeaderCell(
 label: "Due Date"
 ),
 a!gridLayoutHeaderCell(
 label: "Progress"
 ),
 a!gridLayoutHeaderCell(
 label: "Status"
 ),
 a!gridLayoutHeaderCell(
 label: "Since Start"
 )
 },
 rows: a!forEach(
 items: local!goals,
 expression: a!gridRowLayout(
 contents: {
 a!textField(
 readOnly: true,
 value: property(
 fv!item,
 "goal"
 )
 ),
 a!textField(
 readOnly: true,
 value: datetext(
 todate(
 property(
 fv!item,
 "dueDate"
 )
 ),
 "E, dd-MM-Y"
 )
 ),
 a!progressBarField(
 percentage: property(
 fv!item,
 "progress"
 )
 ),
 a!textField(
 readOnly: true,
 value: property(
 fv!item,
 "status"
 )
 ),
 a!textField(
 readOnly: true,
 value: with(
 local!sinceStart: tointeger(
 today() - todate(
 property(
 fv!item,
 "startDate"
 )
 )
 ),
 if(
 local!sinceStart = 0,
 "Today",
 local!sinceStart
 )
 )
 )
 }
 )
 )
 )
)