Create timeline in Knack

[Susanne]

I have developed a learning app and would like to show the progress that the client has made working through the modules. I have a very basic system just now which sets a ‘yes’ flag when a page has been complete, then sets the status of that page to yes/no depending on whether it has been complete. The user then sees a progress page, showing the status. I had to artificially extend the table with a link for the user to view their page results, since Knack doesn’t let you link to a page in this view. The attachment shows what I have so far.

Ultimately, it would be great to have a progress bar, showing how far they have come through the module. Does anyone know if this could be done in Knack please?

[Arjun]

Hey Susanne. Have you tried using a js based progress bar solution like this one? You can just count the number of Yes and convert it to a 0 to 1 range for the function to interpret and show percentage of course completed…

[JulianKirkness]

Hi Suzanne

As a quick and simple solution you can just create a Text Formula field and put something like this in it:

<progress value="{Completed Steps}" max="{Number of Steps}"></progress>

Very simple but it works.

You can, of course, add on text following the progress bar in the normal way of text formulae.

[Susanne]

Thanks Arjun. I’m not sure how to convert a Yes to a 1 and a No to a 0. Is there a function for that?
Regards, Susanne.

[Susanne]

Thanks Julian. At the moment I have a yes/no flag for each page in each module. They are all listed under the employee object or under the HR object (they have the same fields, more or less). In the first instance I need to convert yes from certain fields into a score for a particular module. It’s converting the yes/no in the first instance that I think I should do.

[Susanne]

@Arjun @JulianKirkness I now have my counts sorted. I didn’t realise you could ‘add’ a field which has a yes/no flag. Simple!
I like the simple solution of the text formula @JulianKirkness and I have it working on a page. However, if possible, I’d like to try a fancier approach with the solution you mentioned @Arjun. It looks swish. How do you get the object field value referenced properly in the script though? My scripting is very rusty! Thanks.

[Arjun]

Hey Susanne. I’m assuming this is a table view showing records connected to the logged-in user for that particular course. You could probably use knack’s records render functionality. It might probably look something like this.

$(document).on("knack-records-render.view_xx", function (event, view, records) {
    var progress = 0;
    for (var i = 0; i < records.length; i++) {
        if (records[i].field_xx_raw === true) {
            progress++;
        }
    }
    progressLevel = Math.round(progress * 100.0 / records.length) / 100
    
    var bar = new ProgressBar.Line('#container', {easing: 'easeInOut'});
    bar.animate(progressLevel);
});

Please modify as per your requirement. Substitute view_xx and field_xx with view ID and field ID respectively.

[Susanne]

Thanks Arjun, that looks good, I will try that. I’m taking a week off now, but I can give it a test the week after. Have a good weekend and thanks for taking the time to respond.

[Susanne]

Hi Arjun,
I’m having trouble getting this working. I have decided not to count the ‘yes’ within the employee object through script, instead I created a formula field that counted them for me.
How could I use this in the code above please?
I also like these types of styles, but I don’t know where to put them in Knack. ProgressBar.js - Progress bars with JavaScript
Cheers,
Susanne.

[Susanne]

Julian, have you tried using this one yourself? I’m wondering if you ran into issues with how it is rendered. I have not specified background or foreground colour for my progress bar, but somehow it always ends up that the progress is shown in green, against a black/grey background. I have used the inspector tool to check the CSS and I can’t find where the green and grey/black are set from (I wondered if Knack had default colours for example).
Also, how would you show the percentage achieved so far? I have tried:
{Completed Steps}
as a test and that doesn’t work.
Cheers,
Susanne.

[Arjun]

Hey Susanne. For this to work, you’ll need the formula’s value to be visible in the view. Or else, you’ll have to make an API call to get the data. Can you share screenshots of what the view looks like now and what the builder schema looks like so that I can help you with it…

[Susanne]

Hi Arjun,
Here’s the view. For the schema, I have 57 objects. I’m not sure where to start with that, , but these might help. This is the employee object, which has fields ‘stress less count’ (named after a module and ‘stress less progress bar’.
I have included two different shots of the screen. One with a green bar which is from Safari and another from Firefox (with inspector is use) which comes out blue. They render differently from each other, strangely.
I appreciate you taking a look, thank you.
Susanne.