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

Question

I want to have an input widget that is similar to the built-in multiselect input widget but where instead of checks a number is given, say for example in the pizza order app example, one would be able to pick 3 for the first topping, 0 for the second topping and 1 for the third topping.

Since input widgets are not modifiable and display widgets do not have the "value" field, I thought I could do it through the "submit" button event, but that uses widget.datasource.createItem() which is quite opaque and I don't know how I would get the data from the display widget and integrate it to create an item.

Answer 1

Based on your requirement, I created a simple implementation using a list widget and a client-side calculated model. I also used a multi-select widget to show the dynamic mapping of selections to the actual input widget.

Editor View

From a selected list of toppings, the calculated model will be populated and render the sublist of toppings together with an input field for the user to enter the number of desired toppings.

The multi-select widget is bound to a parameter in the datasource.

Here is the query function to populate the list 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);
}

The list widget will make use of this datasource and bind the name and amount field into a label and a text input.

Preview

I have a button to emulate a SAVE action To capture the entered values and display it in another label.

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";
  });

}

See this simple video on how this works in action.

With regards to creating your own input widgets, app Maker gives you an option to create re-usable sections in your app through the concept of "Page Fragments". You can implement the logic separately, like in my case it's the list widget, then wrap it into a page fragment. You can then use this fragment in your pages.