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:
Anna Wiersema, Official Rep
-
10,930 Points
Posted 4 years ago
Moshe Karmel, Champion
-
8,686 Points
Anna Wiersema, Official Rep
-
10,930 Points
Anna Wiersema, Official Rep
-
10,930 Points
Pat Vachon, Champion
-
45,280 Points
Irvin Waldman, Champion
-
9,026 Points
-
6,602 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?
Pat Vachon, Champion
-
45,258 Points
Had the same issue.... what did I do to fix? Racking my brain! Ugh ... gimme a minute.
Pat Vachon, Champion
-
45,258 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.
-
6,602 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
Anna Wiersema, Official Rep
-
10,930 Points
-
6,602 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 :)
Anna Wiersema, Official Rep
-
10,930 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.
Anna Wiersema, Official Rep
-
10,930 Points
Update: The Progress Indicator can now connect to picklists!
Mike Dwyer, Champion
-
4,736 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,968 Points
Right now its not. But that would be a great add..
-
1,778 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,778 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,968 Points
Thanks for the details here David!
-
1,446 Points
Thanks a lot David!
-
270 Points
Thanks David!
Ben Hubbard
Moshe Karmel, Champion
Anna Wiersema, Official Rep