top of page
Sub-References

Sub-References

Work with several levels of multi-reference fields that connect between collections

Intermediate.png

Intermediate

4K

Published:

April 5, 2021

Girl Enjoying her Drink

by

Anchor 1
Hire a Developer

Example Description

In this example we demonstrate how to connect multiple collections (Faculties, Classes & Lessons) using multi-reference fields. Each faculty has multiple classes associated with it, and each class has multiple lessons associated with it.


The connections between the collections are displayed on different pages: the user can choose a faculty and see which classes this faculty includes. Then he can choose a class and see the different lessons the class has to offer.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It


Collections


We added 3 collections to our site:


  • Faculties: Includes the various faculties and information on each faculty. Each row in the collection includes a multi-reference field called 'classes' that includes the classes associated with the faculty.


  • Classes: Includes the various classes and information on each class. Each row in the collection includes a multi-reference field called 'lessons' that includes the lessons associated with the class.


  • Lessons: Includes the various lessons and information on each lesson.



Backend Code


We added a web module called DBFunctions.jsw that handles all the requests from the different collections: getting the faculty, class, and lesson data. From a security perspective it is advised to interact with your collections using backend code.



Page Code


The site includes the following pages:


  • Home page: Displays a repeater with all faculties and some information about each faculty.


  • Faculties dynamic page: Displays information about a specific faculty and a repeater with the classes associated with the faculty. The page also stores its URL in the session memory in order to return to this specific page when clicking the back button in the Classes dynamic page.


  • Classes dynamic page: Displays information for a specific class and the lessons assosiated with the class. The page gives the site visitor the ability to navigate through all class lessons by clicking the next & previous arrow buttons. It also includes a button to go back to the Faculty dynamic page while still preserving the chosen faculty. It does that by reading the session memory before navigating to the correct page.


  • Lessons dynamic page: Displays all the information related to a specific lesson. It also includes a button to go back to the class dynamic page while still preserving the chosen class. It does so by storing the current lesson ID in the session memory. Then in the classes page we read the session memory in order to display the correct lesson.

APIs We Used

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Mega Search

Mega Search

Filter a repeater using multiple input components.

Intermediate.png

Advanced

Search a Database

Search a Database

Let visitors quickly search your site content.

Intermediate.png

Intermediate

To Do List

To Do List

Keep track of your tasks with a To Do List

Intermediate.png

Intermediate

Anchor 2
bottom of page