Course contents dynamic with URL

[Peter]

I have made a course with different pages.

I would like to show the content, which is in different rows in the data table (course-details) with filtering with the URL parameter, like:

your-domain.com/course-details?order=1
next page: your-domain.com/course-details?order=2

Here “order” is a column in my data table course-details.

Is that possible?

Can I filter dynamically, for example with a custom component?

If not, how should I do that? I am certainly not the first one to provide courses with a Tadabase application.

[Kristen]

Hi Peter, here’s a solution for you:

In your course pages builder table, Add two fields, Page Number (number field), and Last Page? (Text Field).

On the page builder, add these two components: Search & Custom component connect to the “Course” Pages data table

In the search Component, Add the “Page Number” field:

Inside that field, Select Pre-defined, “is”, turn on “Get value from URL” then add “order”:

On the “Search Results” tab, select the custom component you added:

On the “Design” tab, go to the CSS section and add “hide”

In the custom component, add the following code. Remember to update the URL so that it matches your path. The JavaScript in this section is important. I have labelled what all the fields are.

<h2>{{field_347}}</h2><!-- field_347 is Page Number Display -->
<p>{{{field_352}}}</p><!-- field_352 is Page Content -->

<!-- Previous Page Button -->
    {{#is field_348 1}}{{else}}<!-- field_348 is Page Number field -->
        <a class="pull-left" href="javascript:void(0)" onclick="window.location.href= 'https://app.tadabase.io/testing/course-pages?order={{subtract field_348 1}}';">
            Previous Page
        </a>
    {{/is}}

<!-- Next Page Button -->
    {{#is field_351 "Yes"}}{{else}}<!-- field_351 is Last Page field -->
        <a class="pull-right" href="javascript:void(0)" onclick="window.location.href= 'https://app.tadabase.io/testing/course-pages?order={{add field_348 1}}';">
            Next Page
        </a>
    {{/is}}


{{/each}}

On the “Data Source” tab, set the record limit to 1

Here is what you should end up with:

[Peter]

Thanks - I got it to work in a new simple version, although there was some loading issue with my original table.

Just: I had to add a reload to the previous and next buttons.

?pagenumber={{add field_3613 1}}'; window.location.reload();">

It was not automatically reloading, allthough the IP-adress was updated in your above version.

Thanks, it works like intended.

[Peter]

There really is a problem I have.

The content keeps on loading.

I have reduced the custom component to the buttons only, so without displaying content but the waiting symbol remains.

I have changed to another layout, thinking it might be inference with a the CSS of the new layouts, but that didn’t help.

If you use a standard list component then it works and the content is shown, but with the custom component added, the loading of the content breaks, but after the content is shown in the list-component above the custom component.

[Peter]

I think there is a problem with the custom component showing richt text fields. Do you know if there is a special way to show rich text? Do you know if there are any issues?

PS with triple moustache and double moustache same result
@Kristen

[Kristen]

Hey Peter, sorry I’m not sure what I’m looking at here. Are you adding html tags in your rich text fields?

[SuiteUpstairs]

Hey Peter,

I built out what Kristen posted and everything worked for me. Have a look:

Watch Video

[Khalid]

Hi @Kristen,

The course viewer solution is great and it is working fine with one table.

But, suppose we have two tables. One is courses table which is master table which contains course title and course description of different courses. The other is Course contents table which is details table which contains connection field, page number, course content, Last page etc.

We would like to have a master page where all the courses are listed and on the click of the details link button, we would like to show the course content pages as shown in the custom component one by one as you suggested.

How could we achieve this using the functionality you suggested for the course viewer?

Thanks,
Khalid

[Peter]

Khalid found the problem. He found a div was causing the problem.

[Kristen]

Hey Khalid, great question! I love how much detail you included - that’s what we need to see here!

Unfortunately it’s also a tricky question that’s beyond my scope. You might want to consult with a partner to help you figure it out - I see @SuiteUpstairs has been playing with this, maybe he can assist?