Skip to content

Author How to add a page in code Developers

Jump to bottom
farres1 edited this page May 3, 2022 · 10 revisions

In author we have 2 navigation areas where pages can be added

  1. MainNavigation menu / Left hand navigation
  2. NavigationSidebar

1. MainNavigation Menu

eq-author/src/App/QuestionnaireDesignPage/MainNavigation/index.js

Here - each menu item is contained within a RouteButton component.

Create your new RouteButton component in the relevant order that you need your new menu item with the following props:

  • Variant: details for whatPageAreWeOn for router - current location of this menu item
  • To: build custom path using params from react-router-dom
  • Disabled: boolean
  • Small: show smaller icons and menu layout - defaults to large
  • Data-test: used for React testing library

Within RouteButton - the IconText component will display the required icon and text for your menu item. Optional extra component Badge will display the orange error dot if errors are received for that page. Once you have set up your menu item with the above - you need to create your actual new Page Component. See - Creating your actual page below.

2. NavigationSidebar Menu

eq-author/src/App/QuestionnaireDesignPage/NavigationSidebar/index.js

This is where sections, calculated summary pages and confirmation questions are added to the survey by users. There is also an introduction page here.

As a developer, here you can add your own custom pages via the code. First you will need to add your new page to the menu list so it is available to be selected.

Within the NavList component, add a new NavItem component. It should be surrounded by a custom styled component with the same properties as IntroductionListItem. This is to ensure consistent spacing and positioning of the new page / menu item you are adding. (ideally, rename IntroductionListItem to something that is more generic, like MenuItem and use this!)

NavItem has the following props:

  • title: name to be shown in menu list
  • key: should be same as the title
  • titleUrl: URL built using the questionnaire ID and a function that you will need to write inside the following file: eq-author/src/utils/UrlUtils.js - here you will find useful examples of how to build your custom URL using questionaireId and entityName. EG - buildQcodesPath for the Qcodes page. If your new page requires tabs, then copy the following example - buildSectionPath and make use of the buildTabSwitcher function. More complex pages might require a data id and other data items depending on the new page requirements and these would have to be built into the graphQl functions and database and the new page ID would also then be required when making the titleUrl
  • disabled: boolean returned from function isCurrentPage - if we are on the current page, don’t make the menu item clickable.
  • icon: the icon for the menu item you are adding

Once you have set up your menu item with the above - you need to create your actual new Page Component. See - Creating your actual page below

Creating your actual page

Once your menu item for the new page has been added to either the MainNavigation menu or the NavigationSidebar, you need to create your new page.

There are 2 basic page types / patterns that Author currently uses:

  1. Simple page - no tabs (eg - Qcodes page)
  2. Page containing multiple tabs (eg - introduction page)

1.Creating a simple page - no tabs (eg - Qcodes page)

Create a newPage folder in the root of the App folder of the EQ-Author repository. (replace newPage with your appropriate page name) Create the index.js page inside the newPage folder, containing the Route component that will render your new PageComponent. (See example for Qcodes page - eq-author/src/App/qcodes/index.js )

Then create your actual new PageComponent that is being Routed to / displayed - newPage.js (example for Qcodes - eq-author/src/App/qcodes/QcodesPage.js) This will contain the actual component/s that will describe the look and functionality of your new page

Your new structure should look like this: App newPageFolder index.js (simply contains the Route to NewPage.js ) NewPage.js

2.Creating a Page containing multiple tabs (eg - introduction page)

Create a newPage folder in the root of the App folder of the EQ-Author repository. Create the index.js page inside the newPage folder. Here you will add a Route component for each of the new tabs - that will render each tab. (example for Introduction page - eq-author/src/App/introduction/index.js )

Each Tab will then have its own folder within the newPage folder containing the page / component in the index.js file and a test file. Your new structure should look like this: App newPageFolder index.js (simply contains the Route component to each of the tabs) Tab1 index.js Index.test.js Tab2 index.js Index.test.js

Add your newPage folder to the QuestionDesignPage layout switch statement

For both types of pages you will need to add your page to the Questionnaire Design page layout switch statement.

eq-author/src/App/QuestionnaireDesignPage/index.js

around line 180 in the switch statement you will need to include your imported page folder

eg - import newPageRoutes from "App/newPage";

<Switch location={location}>
                      {[
                        ...pageRoutes,
                        ...sectionRoutes,
                        ...questionConfirmationRoutes,
                        ...introductionRoutes,
                        ...metadataRoutes,
                        ...historyRoutes,
                        ...publishRoutes,
                        ...reviewRoutes,
                        ...qcodeRoutes,
                        ...sharingRoutes,
                        ...settingsRoutes,
                        ...newPageRoutes,
                      ]}

Notes

If you have a comments component - it will normally go into the “Preview” tab area in the right hand panel.

Page Template

eq-author/src/components/Layout/index.js

Here you can find a basic page layout template. This allows the title and children to be passed in. The Header area displays the title and children would be the component you want to display within the page

React Router

React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

Nice getting started docs here: https://github.com/remix-run/react-router/blob/main/docs/getting-started/installation.md

Clone this wiki locally