Want to implement counter and progress bar in a form type view for Questionir

[rahuldash171]

Hi Experts  ,

I need one help in my Appsheet app which is a form based questionnaire . It has 3 tabs basically and all are seen on the home page . All the data is in one sheet and the view representation style is tab views .There are 10 question in each tab . I need to provide a counter in each tab which will start like 0/10 and based on the user inputs it will go till 10/10 in every page . All the questions are mandatory . 

Can i provide a progress bar also along with the counter which will give me % completion ? Want to implement both Counter and progress bar . 

Please help me achieve the same .

[WillowMobileSys]

There are a few ways.

The easy way is by adding a column of Percent type, maybe named Progress, that uses the "Range" type display.  It would be shown on each page and use an App Formula to calculate the percent value.  The column label would also be dynamic based on the page and would display something like "0 / 10 Completed" on first page, "1 / 10 complete" on second page, and so on.

It would look something like this:

 

[MultiTech]

I like the ease of integration with this one!

• Though you'll have to copy that percent column to each page... 😤
• You'll have to duplicate something on each page no matter what... but I'm not keen on storing a percent value like that 10 times, one on each page.

I'd rather there just be an empty space, so I'd try and find a way to use a SHOW column for this.

1. My first attempt would be just to create a text thing....
   

   concatenate(
   "---------| Progress |-------------------
   ",
   if(IsNotBlank([Answer1]), "[✔]", "[   ]"),
   if(IsNotBlank([Answer2]), "[✔]", "[   ]"),
   if(IsNotBlank([Answer3]), "[✔]", "[   ]"),
   if(IsNotBlank([Answer4]), "[✔]", "[   ]"),
   if(IsNotBlank([Answer5]), "[✔]", "[   ]"),
   if(IsNotBlank([Answer6]), "[✔]", "[   ]"),
   if(IsNotBlank([Answer7]), "[✔]", "[   ]"),
   if(IsNotBlank([Answer8]), "[✔]", "[   ]"),
   if(IsNotBlank([Answer9]), "[✔]", "[   ]"),
   if(IsNotBlank([Answer10]), "[✔]", "[   ]")
   )

   RESULT
   ---------| Progress |-------------------
   [   ][   ][   ][   ][   ][   ][   ][   ][   ][   ]

   ---------| Progress |-------------------
   [✔][✔][✔][✔][   ][   ][   ][   ][   ][   ]

   ---------| Progress |-------------------
   [✔][✔][✔][✔][✔][✔][✔][✔][✔][✔]

2. Then I'd try and find a nice graphic to use instead - graphics look better
   
3. Then I'd go about trying to implement an SVG or quickchart.io integration or something, so I could have a dynamic image - where I could even throw some relevant info too!
   1. There are some really good posts here in the community for SVGs; give it a search!
   2. Quickchart.io is definitely the easiest I've seen
      1. Make a new VC with the following formula:
         "https://quickchart.io/chart?c={type: 'progressBar', data: {datasets: [{data: [" & [PERCENT_VALUE_HERE] * 100 & "]}]}}"
      2. Change the type to image

As @WillowMobileSys mentioned, there's many ways you could go about this... these would be some of the other 'large brush strokes" you could make

[rahuldash171]

Hi MultiTech ,

Thanks for the reply and i am able to implement the first solution which you have provided . But can you please elaborate on the second one how can i implement graphics in appsheet . Thanks a lot

[MultiTech]

Option 2 was just to find images on the internet, or make your own in some way.

I would really go the route of option 3 - implementing QuickChart.io

• Learning how to integrate this will set you up for the future

[dbaum]

One quick-and-easy way to visually spruce up option number 1 is with AppSheet format rules. You could define rules for thresholds like 25%, 50%, and 75% complete and for each adjust the text color or add an icon that corresponds to the percentage (e.g., the thermometer icons).