Have you ever wanted to pull apart a component and see how it worked? Now you can! We've added the Progress Indicator component to our repo so you can see all the Javascript, JSON and CSS that go on under the hood of a Skuid component & component pack.
Want to get this component in your org? Follow these instructions.
The Progress Indicator component connects to a Wizard or Tab Set and shows users exactly where they are in a process, like so:

Anna Wiersema, Official Rep
-
10,930 Points
Posted 4 years ago
Moshe Karmel, Champion
-
8,686 Points
1. An error occurred while attempting to load the "progressindicator" component pack. Error: 404 status code return from request to
https://cs45.salesforce.com/resource/1445974874000/progressindicatorpack/skuid_builders.json?inline=...
My static resource is called "progressindicatorpack" like the doc example. I'm not sure why "1445974874000" is getting appended to the URL. Any ideas here?
Anna Wiersema, Official Rep
-
10,930 Points
Um... Let's see. So your static resource is a zip file of those 5 files from the repo? It seems like it might specifically be a problem with skuid_builders.json file.
Did you use the same component pack name, progressindicator? That also may affect it.
Anna Wiersema, Official Rep
-
10,930 Points
Pat Vachon, Champion
-
45,280 Points
Irvin Waldman, Champion
-
9,026 Points
-
6,602 Points
this zip package has a problem I guess...
I downloaded and create resource.. as instructed
But when I look in the components , under the Progressindicatorpack there is only something called: "Say hello" and nothing like the progress indicator i was expecting (based on SS in guide)
Could it be the wrong pack was uploaded to Github?
Pat Vachon, Champion
-
45,258 Points
Pat Vachon, Champion
-
45,258 Points
The files in the zip file aren't the same as the individual files.
-
6,602 Points
I downloaded all 6 files from here https://github.com/skuidify/SamplePages/tree/master/progressIndicator (all except the zip file)
But now getting a different error
1. An error occurred while attempting to load the "progressindicator" component pack. Error: Unexpected character ('<' (code 60)): expected a valid value (number, String, array, object, 'true', 'false' or 'null') at input location [4,2]
Not sure what is going on.
Is there any way you could send me your zip file pls?
Thx
Anna Wiersema, Official Rep
-
10,930 Points
- The "Say Hello" component appears when Skuid can't find any components to put in your pack (aka there's no static resource for that pack, or Skuid can't find what it needs there).
- I just got it to work downloading *only the zip file* from gitHub and (without unzipping it) uploading it into my static resource (called progressindicatorpack).
- In Configure, my component pack is called progressindicator and the definition files are skuid_runtime.json and skuid_builders.json
Please let me know when you figure out what was going on! I want it to be as straightforward as possible to be able to get this component in your org, but there's lots of potential pitfalls. Let me know how the instructions can be clearer.
-
6,602 Points
for the 1st point i realized only after , that I had created the component pack from the "new component pack" button , instead of like the instruction using, the + (inline)
The tried again with zipping the individual files myself, and + button for pack , but still did not work and was getting different error.
Tried again with zip file this AM and it works now
Thank you for your and Pat's help :)
Anna Wiersema, Official Rep
-
10,930 Points
Yeah that "new component pack" button is tricky. I think it's more useful when you're developing components in your org and then want to package them, not when you want to import an existing component pack.
The problems I ran into with zipping the files is I was trying to put them in a folder and then zip the folder, but because of the way the file paths were, it wouldn't work. I had to open the folder, select all the files, and then zip them.
Anna Wiersema, Official Rep
-
10,930 Points
Mike Dwyer, Champion
-
4,736 Points
-
1,446 Points
Rob Hatch, Official Rep
-
44,968 Points
-
1,778 Points
If you're interested, I can show you how to do that.
-
1,446 Points
-
1,778 Points
This requires you to fiddle around with the original Component Indicator. If you unzip the pack, you'll find multiple files. The one important to you would be progressIndicatorRuntime.js. In this file you'll find a code block, where the steps are generated as td elements. I altered one line in this block to look like the following:
var td = $('<td class="progress-chunk" onclick="skuid.component.getById(\'' + xmlDef.attr('friendId') + '\').navigate(\'step' + (i + 1) + '\')" data-id="' + steps[i].attributes['data-id'].value + '">');The code above adds an inline onclick event, which gets the wizard and navigates to the according step of the wizard.
And the whole code block for better understanding:
// Iterate through each of our step, and create a // corresponding td element with the proper classesThis solution is not the cleanest nor the best but its working for me and we have it in use as well. Just make sure your steps are named step1, step2, step3, etc...
// and content
for (var i = 0; i < steps.length; i++) {
var td = $('<td class="progress-chunk" data-id="' + steps[i].dataId + '">'); //standard version
var td = $('<td class="progress-chunk" onclick="skuid.component.getById(\'' + xmlDef.attr('friendId') + '\').navigate(\'step' + (i + 1) + '\')" data-id="' + steps[i].attributes['data-id'].value + '">'); //altered navigation version
var text = $('<div class="progress-text">');
if(steps[i].icon && steps[i].icon.value){
text.append($('<div>').addClass('nx-step-icon ' + steps[id].icon.value + ' sk-icon inline'));
}
text.append('<div class="text-content">' + steps[i].label + '</div>');
td.append(text);
td.append('<div class="progress-triangle"></div>');
td.append('<div class="progress-triangle-outline"></div>');
cRow.append(td); }
If you don't need to navigate but want to to some other actions, you could publish an event in the onclick action and subscribe snippets to that event (needs to be a generic event name though).
Hope this helps you
Cheers
Rob Hatch, Official Rep
-
44,968 Points
Ben Hubbard
Moshe Karmel, Champion
Anna Wiersema, Official Rep