Add progress bar to wizard component

Hey Moshe! Thanks for the quick reply. The template field is inside a field editor and the field editor is on “Account”. I still don’t get the progress bar though.

Here is what my template looks like now:

```
```

Does it help if you try it as a stand alone template that gets dragged into the page?

I am not sure I understand. Are you saying drag the template out of the field editor?

You can drag a template field into a page independent of a field editor or any other container. I have a hunch that you may have to do that here.

I did as you suggested and used a template field just on the page, still no luck. Here are what the template options look like. “StateProgrm” is the Account

OK try placing whatever merge syntax your trying to use at the top of the template. Basically start a new line, and type in:

My test to confirm :&nbsp;{{{Account.State_Summit_Percent_Complete__c}}}<br>Without Account prefix :&nbsp;{{{State_Summit_Percent_Complete__c}}}

If anything shows up, you know that the issue is with something else, but if it remains blank, you may be trying to pull in the wrong field or spelled it wrong etc.

The without Account prefix information shows up

OK so try it like that. If it still isn’t working, you probably have an issue with your snippet, in which case I would recommend taking a peek at the Javascript console…

Here is what the Java Console shows:

Resource interpreted as Image but transferred with MIME type image/x-win-bitmap: "<a target="_blank" rel="nofollow" href="https://skuid.na9.visual.force.com/img/cursors/col-expand.cur&quot;.jquery-1.4.2.js:21" title="Link https//skuidna9visualforcecom/img/cursors/col-expandcurjquery-142js21">https://skuid.na9.visual.force.com/img/cursors/col-expand.cur".jquery-1.4.2.js:21</a> (anonymous function)jquery-1.4.2.js:11 c.extend.readyjquery-1.4.2.js:18 Lskuid__ui?page=ActionReports&amp;id=001E000000KF3rnIAD:1 GET <a target="_blank" rel="nofollow" href="https://na9.salesforce.com/17181/logo180.png" title="Link https//na9salesforcecom/17181/logo180png">https://na9.salesforce.com/17181/logo180.png</a> 404 (Not Found)

Using Zach’s example works well for me - except in a popup that has a page include of the page with my wizard. Is that a known problem? Everything worked fine until I added the progress bar, and removing it made it load again in the pop-up. . 

Try changing this line in the Custom Component’s body:

$(function(){

To this:

$(document.body).one(‘pageload’,function(){

That works! Thanks

Hey guys! For a slightly different way to do this, check out the open source progress indicator component that we just posted. It hooks into your Wizard (or a Tab Set) and shows users where they are in a process.

It looks like this:

That link is busted, need to remove some characters at the end, this should work:
https://github.com/skuidify/SamplePages/tree/master/progressIndicator

Thanks!! Looks great

Awesome! Big Thank You!

I’ve been looking to create a progress indicator that looks exactly like this ever since seeing demo screenshots for the Lightning Experience.

Thanks, Jack! Hopefully the link is fixed now :slight_smile:

Has anyone implemented this on a force.com site? I had it working fine until I got the www.example.com to overwrite example.secure.force.com, now my links to static resources are busted I suppose?

Make sure you are using public caching for your static resources and that you are using relative URLs (/resource.css rather than example.com/resource.css). Also make sure that your URL Rewriter isn’t being over-aggressive and rewriting your static resource URLs.

It’s cached Pubilc and we’re not using the URL rewriter (yet), any other ideas? I think it might be something simple like the Site User doesn’t have access to it, but I can’t figure out what “it” is to give the site user access to, how do I assign access to a static resource? Thanks

I’m having trouble editing the CSS on the component pack. I’d like to be able to edit progressindicator.css then re-compress the folder and re-upload. But every time I do that I get a skuid error at runtime:
1. An error occurred while attempting to load the “progressindicator” Component Pack. There may be an issue with the name or location of your Component Pack manifest files. Error: Unable to retrieve content of file

Is it because I’m just using the Mac default compress folder function? Do I need to do some kind of different way to make the folder into a .zip? 

All I want is for the font to be a bit smaller :slight_smile: