是否可以在 App Maker 中创建输入小部件？或者如何使用数字进行多选？

Question

我想要一个类似于内置多选输入小部件的输入小部件，但它不是检查而是给出数字，例如在比萨饼订单应用程序示例中，可以选择 3第一次浇头，第二次浇头0，第三次浇头1。

由于输入小部件不可修改并且显示小部件没有 "value" 字段，我想我可以通过 "submit" 按钮事件来完成，但它使用 widget.datasource.createItem()非常不透明，我不知道如何从显示小部件获取数据并将其集成以创建项目。

Answer 1

根据您的要求，我使用列表小部件和客户端计算模型创建了一个简单的实现。我还使用了一个多 select 小部件来显示 select 离子到实际输入小部件的动态映射。

编辑器视图

根据 selected 的浇头列表，计算模型将被填充并呈现浇头的子列表以及供用户输入所需浇头数量的输入字段。

多select 小部件绑定到数据源中的参数。

这是填充列表 onValueChange 的查询函数。

function generateTopingList(query,recordFactory,callback) {
  var toppingList = [];

  if(query.parameters.topingList){
    query.parameters.topingList.forEach(function(e,i){
        var newRecord = recordFactory.create();
        newRecord.Name = e;
        newRecord.Amount = 0;
        toppingList.push(newRecord);
    });
  }

  callback.success(toppingList);
}

列表小部件将利用此数据源并将名称和金额字段绑定到标签和文本输入中。

预览

我有一个按钮来模拟保存操作以捕获输入的值并将其显示在另一个标签中。

function showResults(selectedItems,resultWidget){

  resultWidget.value = " \n";

  selectedItems.forEach(function(e,i){
     var toppingName =  e.Name;
     var enteredAmount = e.Amount;

     //for display only
     resultWidget.value += toppingName + " - " + enteredAmount + "\n";
  });

}

查看此 simple video 了解其实际工作原理。

关于创建您自己的输入小部件，应用制作工具让您可以通过 "Page Fragments" 的概念在您的应用中创建可重复使用的部分。您可以单独实现逻辑，就像在我的例子中是列表小部件，然后将其包装到页面片段中。然后您可以在您的页面中使用此片段。

是否可以在 App Maker 中创建输入小部件？或者如何使用数字进行多选？

Is it possible to create an input widget in app maker? Or how to make a multiselect with numbers?

google-app-maker