Progress Indicator component now available on Bitbucket

  • 3
  • Question
  • Updated 2 years ago
  • Answered
  • (Edited)
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:

Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb

Posted 3 years ago

  • 3
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
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? 
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
The strange number is harmless and sometimes called a "Cache Buster". It's part of the url that changes every time that static resource is updated. It's really just the unix timestamp of the last modified date of your static resource. My guess as to why the component pack isn't working is that maybe the zip you created contained a folder, so the files are one level deeper than they should be. Try using the zip file that Anna just added to the github repo and see if that works.
(Edited)
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
That worked!! It looks really cool.
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
Yes! So good to hear!  You can thank @Andrew Duensing for this one.
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
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.
(Edited)
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
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)
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Is this responsive to different page sizes?
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Thanks for providing. Already included in a Wizard and deployed to customer org.  Skuid on.
(Edited)
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
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?

Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Had the same issue.... what did I do to fix? Racking my brain! Ugh ... gimme a minute.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Oh yeah. I downloaded the files seperately and compressed myself.

The files in the zip file aren't the same as the individual files.
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
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
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
Things I know:
  • 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.
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
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 :)
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
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.
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
Update: The Progress Indicator can now connect to picklists! 
Photo of Mike Dwyer

Mike Dwyer

  • 3,390 Points 3k badge 2x thumb
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?
Photo of Hasantha Liyanage

Hasantha Liyanage

  • 1,446 Points 1k badge 2x thumb
Guys, is this indicator clickable? can add actions??
Photo of Hasantha Liyanage

Hasantha Liyanage

  • 1,446 Points 1k badge 2x thumb
David, I appreciate if you could tell me how to did you do it!
Photo of David Giger

David Giger

  • 1,758 Points 1k badge 2x thumb
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:

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 classes
// 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); }
This 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...

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)
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Thanks for the details here David! 
Photo of Hasantha Liyanage

Hasantha Liyanage

  • 1,446 Points 1k badge 2x thumb
Thanks a lot David!
Photo of Micael Nussbaumer

Micael Nussbaumer

  • 270 Points 250 badge 2x thumb
Thanks David!