Create timeline in Knack

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?

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…

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.

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.

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.

@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.

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.

1 Like

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. :slight_smile: :grinning:

1 Like