Google Appmaker：根据选定的下拉选项更新表单

Question

我有一个 AppMaker 应用程序，它的发件人来自一个地址 table/datasource。我可以获得带有 next/prev 按钮的表单，但将关键字段（名称）替换为所有名称的下拉列表 （用户可以开始输入名称以跳转到那里，并显示下拉列表）。

我希望当用户从下拉列表中选择时，整个表单都会更新并且 next/prev 按钮也能正常工作 （记录太多，无法使用 next/prev 仅）。如果它使事情变得太复杂，我不必拥有 next/prev 功能。

当前下拉菜单正在工作，但我无法获取 next/prev 按钮集或表单其余部分的索引以反映所选下拉菜单记录。

我试过将 "onValueEdit" 事件设置成这样...

var selected = widget.value;
var idx      = widget.options.indexOf(selected);

console.log("Selected: "+selected+", index = "+idx+"\n");
if(idx < 0) {                      //...this error is never hit
  console.log("Index error - setting to zero!\n");
  idx = 0;
}
widget.datasource.loadPage(idx);   //...update form?

通过控制台日志记录的两个观察结果：

"idx" 变量永远不会可靠地设置为选定的下拉索引，并且是通常为“0”（虽然没有错误消息显示），因此 "indexOf()" 函数没有按预期工作。
"selected" var（名称）总是正确的。

如果我用固定值（例如 5）调用 widget.datasource.loadPage(...)，它对表单中显示的内容没有影响 （保留先前加载的数据） - 显然不是这样做的方法 :v/

你能把一个菜鸟引导到正确的方向吗？

Answer 1

如果您使用的是默认的 App Maker 表单，那么您会看到所谓的 pager，实际上并没有分页。它触发 prevItem/nextItem 数据源方法，换句话说，它在数据源项而不是页面中导航。这是 App Maker 文档中的引述：

nextItem: Selects the next item. For Query Datasources, if the current item is the last item on the page, then this loads the next page and selects the first item on the newly loaded page.

因此，如果您已经加载了所有项目（您将数据源的 query page size 设置为 0），那么您只需更改数据源中的选定项目：

// onValueEdit dropdown event 
// assuming, that form and dropdown share same datasource
widget.datasource.selectKey(newValue._key);

如果你真的有很多项目并且在一次调用中加载所有项目是不可行的......那么这将是另一回事......

Answer 2

我删除了这个页面并重新开始，并将默认的公司名称数据字段替换为下拉列表，我将下拉列表设置为：

Options: @datasources.Addresses.items 

Value: @datasources.Addresses.item

没问题？！不确定我的原始页面发生了什么！

更新： 因此，您似乎需要同时删除值和选项，然后重新输入。当您这样做时，OK 会亮起。

此外，我最初对 App Maker 的看法是构建 UI 并附加数据。那是我的第一个错误。您构建数据，然后让 App Maker 为您构建 edit/add 页面。

Answer 3

更新： Options 和 Value 的设置很重要，如下图所示！

但是，我无法那样设置它们 （阅读：浪费时间！），直到我使用 绑定选项列表中的更多选项，然后再次尝试（我什至尝试了一个全新的应用程序！）。我被迫选择 ..projections.. 然后在 OK 按钮可用之前选择最后一个字段。

不确定 AppMaker 是否存在错误或有一些我不理解的简单问题！

None 我原来问题中的编码是必需的。一旦以这种方式设置，绑定就可以像您期望的那样工作！！所有其他字段都设置为 @datasource.item. 并绑定到所选的任何项目。下拉列表也不需要 Events 设置，正如我认为的那样。

Google Appmaker：根据选定的下拉选项更新表单

Google Appmaker: Update form based on selected dropdown option

google-app-maker