Modifying and adding pages

Prerequisite

We have used the Plotly Dash (opens in a new tab) framework for building this dashboard. Before modifying any contents of this dashboard, thus, please review the respective documentation:

Adding a new page

The current implementation of the dashboard includes the following five subpages:

Welcome
Data in Helmholtz
Repositories
Assess My Data
About

The respective file structure is the following:

about.py
assess_my_data.py
data_in_helmholz.py
fair_by_repository.py
home.py

For adding a new page you may proceed with the following steps:

1. Add a python file in the `pages` directory

The name of the file as default will be the title and the part of the URL to access the page. (This default can also be changed)

Example: pages/archives.py

2. Register the page

To register the new python file (e.g., archives.py) as a new subpage of the dashboard, please add the following lines:

pages/archives.py

    import dash
 
    dash.register_page(
    __name__, path_template="/<lang>/archives", title="Our Archives Data"
    )

The expression path_template="/<lang>/archives" defines the URL access for the page which means a variable lang for languages follow /archives.

Example: /en/archives or /de/archives

To use a multi-page layout (opens in a new tab) in the HMC FAIR Data Dashboard, the current implementation already includes the following necessary code lines in app.py:

use_pages=True
dash.page_container

3. Add the page layout

After registering the new page, you may add the layout of the page as:

pages/archives.py

...
from dash import html
...
 
 
layout = html.Div([
    html.H1('This is our Archive page'),
    html.Div('This is our Archive page content.'),
])

Rendering this example would result in the following output:

The content of the page

4. Updating the navigation bar on top of each page

Texts and hyperlinks to each subpage in the navigation menu are defined in the following segment of the files 'translations/nav.en.yml' and 'translations/nav.de.yml':

translations/nav.en.yml

en:
  welcome: Welcome
  welcomeLink: /en
  dataInHelmholtz: Data in Helmholtz
  dataInHelmholtzLink: /en/data-in-helmholtz
  repositories: Repositories
  repositoriesLink: /en/fair-by-repository
  myData: Assess My Data
  myDataLink: /en/assess-my-data
  about: About
  aboutLink: /en/about

To add a subpage reference to the new navigation menu, you may add a code segment similar to the following:

pages/partials/navbar.py

dbc.NavLink(
    i18n.t("nav.welcome"),
    href=i18n.t("nav.welcomeLink"),
    active="exact",
),

The text and links should be formatted in translations/nav.en.yml and translations/nav.de.yml in the following way: