Google Forms Addon Sidebar - 如何使其具有导航功能的多个页面？

Question

我正在构建一个 Google 表单插件，我需要像这样进行基本导航：

假设在插件侧边栏的页面 A 上，我有一个按钮 "Begin Setup"
如果我点击"Begin Setup"，B页打开，A页消失
在页面 B 上，我有一个 link 按钮 "Back"。
点击"Back"后，A页打开，B页消失
这个循环可以一再重复

在构建普通 Web 应用程序（现代 - React，Vue.js 客户端路由或经典 - jQuery 带有基本标签和 url)

但我在此处扫描了 Google Apps 脚本文档 https://developers.google.com/apps-script，但找不到有关此内容的信息

我该如何实现这个功能？

谢谢！

Answer 1

这是我的解决方案：

我使用这个 repo 将 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

Google Forms Addon Sidebar - 如何使其具有导航功能的多个页面？

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

javascript

reactjs

google-apps-script

google-apps-script-addon