More open source goodness now available on bitbucket.org/skuid!
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:
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:

-
10,900 Points
Posted 3 years ago
Moshe Karmel, Champion
-
8,646 Points
Cool! However...I'm getting the following error :
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?
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?
-
10,900 Points
My guess is that 1445974874000 is the resource Id for your static resource,and maybe specifically the skuid_builders.json file.
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.
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.
(Edited)
-
10,900 Points
Also, hopefully this will help too - I didn't realize that you could upload a zip file to gitHub. But I have done that now, so you only have to download the progressindicatorpack zip file and upload it as your static resource.
(Edited)
mB Pat Vachon, Champion
-
42,926 Points
Irvin Waldman, Champion
-
9,016 Points
Thanks for providing. Already included in a Wizard and deployed to customer org. Skuid on.
(Edited)
-
5,630 Points
Hi,
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?

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?
mB Pat Vachon, Champion
-
42,926 Points
Had the same issue.... what did I do to fix? Racking my brain! Ugh ... gimme a minute.
mB Pat Vachon, Champion
-
42,926 Points
Oh yeah. I downloaded the files seperately and compressed myself.
The files in the zip file aren't the same as the individual files.
The files in the zip file aren't the same as the individual files.
-
5,630 Points
Thx Pat,
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
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
-
10,900 Points
Things I know:
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.
- 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.
-
5,630 Points
Hi Anna,
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 :)
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 :)
-
10,900 Points
Glad you got this to work! Sorry for the angst!
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.
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.
-
10,900 Points
Update: The Progress Indicator can now connect to picklists!
Mike Dwyer, Champion
-
3,842 Points
Could someone explain the concept here, as I failing to grasp the utility of a progress indicator associated with a picklist. A wizard has steps that occur in a sequence, and only one step is visible at a time. A tabset has multiple values, and you only see one tab at a time - but all labels --- the progress indicator just gives those labels (or alternate text) full-screen width. But how do you progress through a picklist? Are there any examples available?
-
1,446 Points
Guys, is this indicator clickable? can add actions??
Rob Hatch, Official Rep
-
44,158 Points
Right now its not. But that would be a great add..
-
1,758 Points
I managed to get that working.
If you're interested, I can show you how to do that.
If you're interested, I can show you how to do that.
-
1,446 Points
David, I appreciate if you could tell me how to did you do it!
-
1,758 Points
Hi Hasantha
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:
And the whole code block for better understanding:
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
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
(Edited)
Rob Hatch, Official Rep
-
44,158 Points
Thanks for the details here David!
Ben Hubbard, Employee
Moshe Karmel, Champion
Anna Wiersema