Progress bar component

Is there any component like a progress bar in skuid to add in a page?

Hey @moradrimor, do you know if you’re using v1 or v2 pages in Skuid?

I saw from this previous post you were on 12.2.9, so I’m guessing you’re on v1.

V1 Custom Component: Follow the instructions here to create a progress indicator component:

Ui-Only Donut Chart: In either version if you want a circular progress indicator, you can use a donut chart based on a Ui-Only model that you update in the background as users reach certain milestones.

V2 details for posterity:

In v2 you can use conditional rendering and styling to build your own progress indicator.

You can also show progress in navigation items in the Navigation Component as shown here:

If you’d like an out of the box progress indicator component for v2, you can create that in the Ideas category so other users can vote it up.

What I usually do (skuid V1) is I’ve created a custom object in Salesforce that has a picklist with values from 0-100 in increments of 5 (0, 5, 10, 15, 20…) … I then use that custom object in a model (not queried, I just use create default row)

Then I create a Progress Indicator in SKUID that goes off of that picklist field:

I then update the picklist value in SKUID using an updateRow call in javascript with whatever percent done my progress is, rounding to the nearest 5 increment using a javascript function:

varModel.updateRow(varRow,{
	PercentDone__c: skuid.custom.formatPercentDone(percentDone)
});

// skuid.custom.formatPercentDone(number)
// Takes a number from 0-100 and formats percent done for use in a picklist based progress indicator that goes in increments of 5 from 0-100
skuid.custom.formatPercentDone = function (percentDone){
	if(percentDone === undefined || percentDone === null || isNaN(percentDone) || percentDone < 0 || percentDone > 100){
		return undefined;
	}

	return `${Math.round(percentDone/5)*5}`
};

Now the progress indicator will update with the correct % (rounded to the nearest 5)