How to navigate?

The SDC navigation controller should be the first controller in the index HTML page. This controller enables dynamic navigation between your controller views.

Basic Navigation

SDC links need to have the ‘navigation-links’ class. Links with this class are handled by the SDC-Navigation controller. The underlying navigation allows dynamic navigation based on a easy to learn syntax. The following are some examples of the ‘href’ attribute of navigation links.

/view-a/view-b -> view-b as subview of view-a
*/view-b -> keeps first view as it is and view-b as subview
../view-b -> replaces current latest subview by view-b
./view-b -> adds view-b as next latest subview to the current path

The first part of the href path always represents the main view, which is displayed in the root navigation area.

Each additional path element is displayed inside a <div> with the class sdc_detail_view.

When the controller defined in the 5th path element is loaded, it checks whether the view from the 4th path element already contains an element with the +sdc_detail_view* class.

If it does, the 5th view will be placed inside that sdc_detail_view container.
If it does not, the 5th view will replace the 4th view entirely.

Parametrized Navigation

There are two types of parameters that can be passed to the subsequent controller. Parameters that are intended for the Python server view class and parameters that are to be passed directly to the JS SDC controller.

To pass parameters to the client, you can use the onInit method of the controller. This is part of: Live cycle. To address these, you must write the parameters in the link separated by ‘&’ after the ‘?’. For example:

<a class="navigation-links" href="/view-a/view-b?name=Max&age=3"

And in the ViewA Controller the matching counterpart with:

function ClassA() {
    ...
    onInit(name, age) {
    ...
}

To pass parameters to the server, add the necessary parameters to the relevant URL path in the sdc_url.py file, as well as to the SDCView class, as shown below.

...
urlpatterns = [
    path('view-a/<int:age>', sdc_views.ViewA.as_view(), name='scd_view_view_a'),
]
...

./root_dir/app/sdc_urls.py

and

...
class ViewA(SDCView):
    template_name = 'app/sdc/view_a.html'

    def get_content(self, request, age, *args, **kwargs):
        return render(request, self.template_name, {'age': age})
...

./root_dir/app/sdc_views.py

Then, from the project root directory, you need to run ‘sdc_update_url’. This command updates the URL path in the SDC controller.

./manage.py sdc_update_url

Navigate from code

You can navigate to a divergent SDC controller from the JS code at any moment. Therefore, you only need to import the trigger and call it. as follows:

import {AbstractSDC, app, trigger} from 'sdc_client';
...
class ViewA(AbstractSDC) {
    ...
    sameHandler() {
        const age = 3;
        const name = 'Max';
        trigger('goTo', ['view-a', 'view-b'], {age, name});
    }
}

How to navigate?

Basic Navigation

Parametrized Navigation

Navigate from code

Subview in Modal