Google Forms Addon Sidebar - How to make it multiple pages with navigation?

Question

I'm building a Google Forms Addon and I need to do a basic navigation like this:

1. Suppose that on page A of the addon's sidebar, I have a button "Begin Setup"

2. If I click "Begin Setup", page B will be opened, and page A will disappear

3. On page B, I have a link button "Back".

4. After I click "Back", page A will be opened, and page B will disappear

5. This cycle can repeat again and again

This basic navigation is very easy when building normal web applications (modern - React, Vue.js with client-side routing OR even classic - jQuery with basic tag < a > and url)

But I scanned Google Apps Script document here https://developers.google.com/apps-script and I can't find information about this

How can I do this functionality?

Thank you!

Answer 1

This is my solution:

I use this repo to integrate React to my development https://github.com/enuchi/React-Google-Apps-Script

Here is the code:

Code for server:

code.js

import * as publicFunctions from './forms-utilities.js'

// Expose public functions
global.onOpen = publicFunctions.onOpen
global.showSidebar = publicFunctions.showSidebar

forms-utilities.js

// Use ES6/7 code
const onOpen = () => {
  FormApp.getUi()
    .createAddonMenu()
    .addItem('Configure notifications', 'showSidebar')
    .addItem('About', 'showAbout')
    .addToUi()
}

const showSidebar = () => {
  let ui = HtmlService.createHtmlOutputFromFile('sidebar').setTitle(
    'Form Awesome',
  )
  FormApp.getUi().showSidebar(ui)
}

export {
  onOpen,
  showSidebar,
}

Code for client (React):

index.jsx

import React from 'react'
import {render} from 'react-dom'

import Sidebar from './components/sidebar'

render(
  <Sidebar />,
  document.getElementById('index'),
)

sidebar.jsx

import React from 'react'
import {BrowserRouter, Redirect, Route, Switch} from 'react-router-dom'

import PageOne from './pageone'
import PageTwo from './pagetwo'

export default class Sidebar extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Redirect to="/" />
        <Switch>
          <Route path="/" exact component={PageOne} />
          <Route path="/pagetwo" exact component={PageTwo} />
        </Switch>
      </BrowserRouter>
    )
  }
}

pageone.jsx

import React from 'react'
import {Link} from 'react-router-dom'

export default class PageOne extends React.Component {
  render() {
    return (
      <div>
        <div>Page One</div>

        <Link to="/pagetwo">Go to Page Two</Link>
      </div>
    )
  }
}

pagetwo.jsx

import React from 'react'
import {Link} from 'react-router-dom'

export default class PageTwo extends React.Component {
  render() {
    return (
      <div>
        <div>Page Two</div>

        <Link to="/">Back</Link>
      </div>
    )
  }
}

You can check the full sample repo here: https://github.com/piavgh/apps-script-react-navigation-sample