Progress bar in certain areas | XM Community
Skip to main content
Solved

Progress bar in certain areas

  • August 1, 2023
  • 4 replies
  • 101 views

Forum|alt.badge.img+2

Is it possible to add a progress bar for specific sections of a survey (e.g. progress bar for beginning of survey, progress bar for last part of survey separately) or does it have to be the entire experience?

Best answer by TomG

Do you know how the piping or JavaScript options would work?

For piping, if you had an embedded data field ‘percent’ that contained the percentage, you would do this:

<progress id="pbar" style="width:100%" value="${e://Field/percent}" max="100">

To set the value with JavaScript, you would do something like this:

var percent = 50;
jQuery("#pbar").val(percent);

 

4 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6084 replies
  • August 1, 2023

You can add your own progress bar using a html <progress> tag and either pipe the value or set the value with JavaScript.


Forum|alt.badge.img+2
  • Author
  • Level 2 ●●
  • 9 replies
  • August 2, 2023

Do you know how the piping or JavaScript options would work?


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 6084 replies
  • Answer
  • August 2, 2023

Do you know how the piping or JavaScript options would work?

For piping, if you had an embedded data field ‘percent’ that contained the percentage, you would do this:

<progress id="pbar" style="width:100%" value="${e://Field/percent}" max="100">

To set the value with JavaScript, you would do something like this:

var percent = 50;
jQuery("#pbar").val(percent);

 


Forum|alt.badge.img+12
  • QPN Level 3 ●●●
  • 38 replies
  • August 2, 2023

simple and to the point solution TomG, really like this one.