The RadGrad Sandbox


RadGrad developers need a place to build, evaluate, and show example uses of new UI components without impacting on pages intended for RadGrad users.


The RadGrad "Sandbox" is a directory located in ui/pages/sandbox containing "developer-only" pages. These pages are not accessable from menus; instead, you must type in the URL in manually in order to access them.

Creating a sandbox page requires two steps:

First, add your page to the ui/pages/sandbox directory. You could start by making a copy of an existing sandbox page so that you get the header set up. A minimal sandbox page might look like this:

import React from 'react';
import PageLayout from '../PageLayout';
const headerPaneTitle = 'SandBox: Segment Design';
const headerPaneBody = 'Examples of RadGradSegment. (April, 2021)';
const headerPaneImage = 'header-sandbox.png';
const SandBoxExamplePage: React.FC = () => (
<PageLayout id="sandbox-example-page" headerPaneTitle={headerPaneTitle} headerPaneBody={headerPaneBody} headerPaneImage={headerPaneImage}>
Example stuff goes here.
export default SandBoxSegmentPage;

Second, define a route to your page in ui/layouts/utilities/routes-config.ts. You will have to choose a role (or roles) associated with the Sandbox page. The initial sandbox pages require the user to be a student.

Scroll to the bottom of this file to see some existing sandbox page routes. For example:

{ path: `/${URL_ROLES.STUDENT}/${USERNAME}/${COMMUNITY}`, component: CommunityPage },
// The following routes display sandbox pages under the student role.
{ path: `/${URL_ROLES.STUDENT}/${USERNAME}/sandbox/labels`, component: SandboxLabelPage },
{ path: `/${URL_ROLES.STUDENT}/${USERNAME}/sandbox/segments`, component: SandBoxSegmentPage },

Unless there's a compelling reason, you might as well add your page to the student role.


Here is a brief overview of existing Sandbox pages:


This page provides examples of how to use RadGrad entity labels, and how they look when rendered:

The source code for this page is SandboxLabelPage.tsx.


This page provides examples of how to use the RadGradSegment, RadGradHeader, and RadGradHeaderOptions components:

The source code for this page is SandboxSegmentPage.tsx.

Last updated on by Philip Johnson