I have Suggest Box widget and I need to make suggestions based on several fields. App Maker allows only use 1 field for suggestions, so I need to implement custom "suggest" function.
I am binding to onInputChange(widget, event) to get current input, but there is no input data.
How can I retreive user's input in suggest box widget?
I would create a new query builder data source base on your data source with something like
Column1 startsWith? :search or Column2 startsWith? :search or Column3 startsWith?
:search
Then add a standard text box with the oninputchange event something like
widget.datasource.query.parameters.search = widget.value;
widget.datasource.load();
even change the textbox to searchbarlight up in the top right
You can access Suggest Box widget input using event.srcElement.value:
function suggestBoxInputChange(widget, event)
{
console.log(event.srcElement.value);
}
Related
I am trying to put together a mock up for a data collection app for a local nonprofit using GSuite's AppMaker. So far I really like the tool.
One thing I need to be able to do is streamline the data entry for the site representatives. In my app, I display a list of students in a table, where one of the columns is a boolean value which represents attendance. The desired result is for the teachers to be able to input the date field one time using the date input button at the bottom of the page. Then they can quickly point and click down the Present column to log attendance.
My question is: how would I link the date selector dropdown so that the date field pre-populates with the selected date from the input field? I don't want them to have to enter the field over an over again since its the same for each row and I don't want the user experience to feel clunky.
Screenshot of the App for reference:
Using client script, you can add the following to the onValueEdit event handler of the date widget at the bottom.
var items = widget.root.descendants.<YourTable>.datasource.items;
items.forEach(function(item){
item.<DateField> = newValue;
});
The only thing to take into account is that when using client scripting, you will only update the records loaded in the table at the moment; i.e, if your table has paging, it will only update the current page. If you are using paging, then you will need to add the following code to the onPreviousClick and the onNextClick event handlers of the pager widget:
var selectedDate = widget.root.descendants.<YourDatePicker>.value;
var items = widget.root.descendants.<YourTable>.datasource.items;
items.forEach(function(item){
item.<DateField> = selectedDate;
});
In App Maker, what is the simplest way to achieve the same result with a dropdown box that you can with a suggest box, which can return the whole record when you make a selection giving you the ability to assign associated record values to other fields on the page?
Consider a data model with three fields, (Code, Description, and Severity). Add a dropdown box to select the Code. Have the selection, (probably using onValueChange or onValueEdit), write the selected Code's Description to a label field beside the dropdown box. The Code's Severity will also be used to affect the style in some way like background color or something, but for this answer, merely assigning the value to a scripting variable will be good enough. It's the record value access and assignment mechanism I am after.
Clarification: This data model will not be the page's datasource. It is a secondary reference table used for assigning a code to a ticket. You can also assume that a record value will be written to a field in the page's datasource as well.
I would appreciate the simplest low code solution as we will have non-programmers attempting this. Thanks.
As long as you leave your value binding on the dropdown blank the following should work:
Set the options binding to:
#datasources.YourDatasource.items
You may want to consider changing the 'Names' binding to be the projection of a particular field in this datasource otherwise the values showing in your dropdown will only be the 'keys' from this datasource.
Then in your onValueEdit event you will gain access to individual fields like this:
var item = widget.datasource.item;
item.YourFieldToEdit1 = newValue.YourOtherDatasourceField1;
item.YourFieldToEdit2 = newValue.YourOtherDatasourceField2;
That would probably be the simplest way.
In Google App Maker, I have several widgets on a page.
One of these widgets is called Label12 (shown in Screenshot 1).
It definitely exists and is also shown in the breadcrumb trail at the top of my screen.
However, when I attempt to reference Label12 in my code, it does not seem to exist.
If I use the ctrl+space code completion helper, the Label12 widget is not shown as an option (shown in screenshot 2).
When I attempt to code it manually (e.g. app.pages.Reconciliation_Details.descendants.Label12.visible) it returns the error "Cannot set property 'visible' of undefined".
Why can App Maker not see Label12?
Screenshot 1 showing Label12 on page:
Screenshot 2 showing absence of Label12 when coding:
App Maker can see Label12. The point is that the label is inside a table widget, hence according to the documentation:
Because a table is a collection of other widgets, you can't use the Widget API to interact with a table. However, you can use scripts to manipulate the individual widgets that make up a table.
The above statement makes sense because the amount of rows a table will display depends on the datasource items; i.e., the rows are dynamically created when the widget datasource is loaded in the ui. Therefore, in order to access the label you need to first access the children of the Table1Body, which is a collection of named values known as PropertyMap.
I believe you are trying to hide/show that specific label based on some logic. The correct way of doing it would be something like this:
var rows = app.pages.Reconciliation_Details.descendants.Table1Body.children._values;
for(var i=0; i<rows.length; i++){
var row = rows[i];
var label = row.descendants.Label12;
label.visible = true; // or false
}
I am able to show the data source data in google app maker table widget, but I don not know how to show static values (array of object) to table widgets programmatically.
I am new to app maker,I don not know is it possible to add values to table widget programmatically or not.
If any one knows please help me...
Thank you in advance :)
To call your own create children method you would want to set up a panel similar to the picture provided and set a datasource for that panel for which items you want to appear in that panel.
Then go to events for that panel and in the onDataLoad event enter the following code as it pertains to your own data. In my example I used a datasource called employees, and I created a label with the employee name for each item in the datasource.
widget.datasource.items.forEach(function(item) {
var node = document.createElement('div');
node.className = 'app-Label';
node.style.margin = '8px';
node.textContent = item.EmployeeName;
widget.getElement().appendChild(node);
});
That is about the simplest example I have. In the case of a table you would want to create your own base container, a header, and then a container that holds all your table rows. Then in your table body you would set up a similar script that attaches row panels and in the row panels you would create your labels. This would also be possible to declare your own array of objects and loop over each object this way.
Currently I have a table which contains input from users, and these input will be shown in a Form.
The case is, I am able to show checkbox in the form manually but as the input from users grows, I need to have the checkbox to be generated automatically. Is there any way to achieve this in X++?
There no restriction whether the checkbox is lined horizontal or vertical, it's just it would be nice if it can be shown as columns.
I wanted to make the checkbox generated automatically so when Table_A have inputs, I don't need to insert a form manually.
This is so when I look at Stall 1, I know what menus it is selling.
As mentioned by FH-Inway, you need to create additional table e.g. Table_ATable_BRelation. Please find below code to add controls dynamically:
form = formRun.form();
design = form.design();
grpCtrl = design.addControl(FormControlType::Group, #GroupControl);
while select Table_A
{
idx++;
Table_ATable_BRelation = this.findOrCreateRelation(Table_A, Table_B);
chkBoxCtrl = grpCtrl.addControl(FormControlType::CheckBox, strFmt("CheckBox%1", Table_A.ID));
chkBoxCtrl.label(Table_A.Food_Menu);
chkBoxCtrl.labelPosition(LabelPosition::Above);
chkBoxCtrl.helpText(strFmt("your text here %1.", Table_A.Food_Menu));
chkBoxCtrl.value(Table_ATable_BRelation.IsSelling);
chkBoxCtrl.registerOverrideMethod(methodStr(FormCheckBoxControl, clicked),
methodStr(ClassHelper, checkBoxClicked),
this);
}
grpCtrl.columns(idx);