Боковая панель аддона Google Forms - Как сделать так, чтобы на нескольких страницах была навигация?

Question

Я создаю аддон Google Forms, и мне нужно выполнить простую навигацию, подобную этой:

1. Предположим, что на странице A боковой панели аддона у меня есть кнопка «Начать настройку»

2. Если я нажму «Начать настройку», откроется страница B, и страница A исчезнет

3. На странице B у меня есть кнопка ссылки «Назад».

4. После того, как я нажму «Назад», откроется страница A, и страница B исчезнет

5. Этот цикл может повторяться снова и снова

Эта базовая навигация очень проста при создании обычных веб-приложений (современные - React, Vue.js с маршрутизацией на стороне клиента ИЛИ даже классические - jQuery с базовыми тегами и url)

Но я отсканировал документ скрипта Служб Google здесь https://developers.google.com/apps-script и не могу найти информацию об этом

Как я могу сделать эту функцию?

Спасибо!

Answer 1

Это мое решение:

Я использую этот репозиторий для интеграции React в мою разработку https://github.com/enuchi/React-Google-Apps-Script

Вот код:

Код для сервера:

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,
}

Код для клиента (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>
    )
  }
}

Полный репозиторий можно посмотреть здесь: https://github.com/piavgh/apps-script-react-navigation-sample