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
}
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;
});
I'm setting in place a visualization which data are driven by selections made through bokeh widgets (mainly dropdowns).
The dropdowns are linked (i.e: depending on dropdown 1 choice, dropdown2 will be filled with certain data, etc...)
I have 2 needs which tend to be the same:
I know I can get the value of a choice by using dropdown1.value (in an on_change callback) so:
How can I set the value of a dropdown (and force it to display this choice) ?
How can I reset all dropdowns to the default startup position?
Thanks for the help!
The Bokeh Dropdown widget doesn't support displaying the value that you clicked. You would need to use Select widget for that.
Then like bigreddot already said there is no tracking of default value but if you put your "default" value as first in the options attribute of your Select then you can do:
select.value = value to select/display a value
select.value = null (JS callback)
or
select.value = None (Python callback) to select/display the first value
In JavaScript, or Python:
widget.value = new_value
There's nothing that keeps track of the initial values you set. You will have to record them and set them as above when you want them to reset.
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.
In my main data input in my Google App Maker app, I have relation data that's displayed in a list. I want the entries in that list to be able to be null until the user takes a specific action by clicking on a particular button, but at that point, I want the existence of values to be validated.
For the life of me, I couldn't figure out how to access iterate through the rows in the list and check the value of a specific field. But after a TON of trial and error, I figured it out -- see below.
Starting with the list widget (MyList), get the rows contained in it:
var rows = MyList.children._values;
To access the widgets in an individual row, identify them as an array first:
var widgets = rows[0].children._values;
Then get the value of the widget you want by identifying by index:
var value = widgets[0].value;
I am trying to build a 6x6 grid layout. In each cell, there will be an input check box. I want to bind the checkboxes to my backing bean in a "consecutive fashion"...meaning, I would like to be able to iterate over the checkboxes to see whether they are checked or not. Basically, there must be an underlying data model. For example, you can drag over and drop off as a table, any item in the data control palette. Then in my application module, I can modify the view object as I wish before I save to the database. Now if I have a table with 36 rows and two columns (one is Id, one is Numeric (1 or 0)). I would like to drag over that table and drop off as a Grid that will enable a user to update each of the rows by selecting or 'un-selecting' a checkbox.
Try to use for each or Iterator component. They iterate over some array/collection and repeat elements enclosed within those components. You can check how Oracle does Dynamic Table (when you drag view object instance from application module to a page, choose dynamic table option) to get and idea.
try :
http://jobinesh.blogspot.com/2010/06/model-driven-approach-for-building.html
http://blogs.oracle.com/shay/2010/10/adf_faces_dynamic_tags_-_for_a.html
also try google with "dynamic form adf"