Dynamically create widgets based on records in a datasource - google-app-maker

(Apologies in advance for the poorly worded question.)
Not sure if this is even possible - Have not been able to find any documentation regarding this...
I have a datasource whose records contain fields of information on certificates.
For each record in the data source I want to create a label widget on a specified panel. (The panel has been already been created on an app maker page.)
Going to put some pseudo code below to show what I am hoping to achieve:
var length = app.datasources.Certificates.items.length;
var records = app.datasources.Certificates.items;
for (var i =0; i <length; i++){
app.pages.A_Edit_Certificate_Requirements.descendants.Panel1.createNewWidget(label,text = records[i].Certificate_Name)
}
.newWidget(type of widget, property of widget to configure) is the pseudo portion.
Anyone know if something like this is even possible?
Reason I am looking to do it via this method is to keep the page as dynamic as possible.

If you do want to proceed with creating the labels dynamically yourself here would be some sample code to get the same accomplished. In order for this to work your panel datasource would need to be set to 'Certificates' and the code would need to be attached to the panel's onDataLoad event:
widget.datasource.items.forEach(function(item) {
var node = document.createElement('div');
node.className = 'app-Label';
node.style.margin = '8px';
node.textContent = item.Certificate_Name;
widget.getElement().appendChild(node);
});

Related

Getting selections from a list object

I have a table inside of appmaker that I've added checkboxes to like so:
I'd like to get a list of the emails from entires that the user checks. At this point I'm not even able to access the status of a single checkbox. This is the current code snippet I tried adding to a button:
console.log(widget.parent.parent.parent.children.Panel1.children.Table3Panel.children.Table3.children.Table3Body.children.Table3Row.children.UserSelectionCheckbox.value);
I get the error:
Cannot read property 'children' of undefined
at Home.Panel1.OuSelectPanel1.Button6.onClick:1:133
I was able to use the autofill to write this entire statement, why can't it find the child object? Is there any way to reference this list directly without going down the tree from the widget or the app root?
For this type of functionality the autofill (intellisense) will not work for you. You need to address the children differently when you try to get a collection of rows from a table. I would suggest code similar to this for your button onClick event:
var rows = widget.root.descendants.Table3Body.children._values;
var emails = [];
for (var i in rows) {
var value = rows[i].children.Checkbox1.value;
if (value) {
emails.push(rows[i].datasource.item.Email);
}
}
console.log(emails);
Again the auto complete code feature simply won't work after you choose the _values, which will return all immediate children of your table body, which is what you want.
based on the 1:133 it seems to be saying that Table3Row has no children. I wonder if using widget.root.descendants.Table3Row might be a different way of doing it address the particular table.

What is the best way to hide "Completed or Cancelled Items" in a table?

So I have setup a model/table that users will use as a project task list. I would like it so that when they change the Status (a field in the model) of an item to either Completed or Cancelled it is hidden.
That way they are only dealing with active entries. But I would also like them to be able to view these hidden (archived) items if needed.
I added the following code to the onAttach option of the table
var datasource = app.datasources.Projects;
datasource.query.filters.Status._notContains = 'Completed';
datasource.load();
And then I have a button with the following code so they can see hidden/archived items:
widget.datasource.query.clearFilters();
widget.datasource.load();
app.closeDialog();
var datasource = app.datasources.Projects;
datasource.query.filters.Status._contains = 'Completed';
datasource.load();
It works, but I feel like there might be a better/more elegant way to accomplish this. Especially since it looks like the app has to load then data, THEN filter it (which results in a slower load). (I think I might have some redundant code in there as well)
Also I feel like I am missing something with my syntax, because I can't get it to filter out Completed AND Cancelled.
Thank you for your help!
If you have a single page of items in the table and there aren't many items, then you can filter on the client side. For example, you can use a binding expression to add a "projectHidden" style to the row based on some logic and then use CSS to change the visibility of the row.
For your second code block, there is no reason to clear filters, load, set the filters and then load again. Just clear the filters, set the new filter, and call load. Also if you are manually controlling the query load, then you might want to uncheck the setting in the data source to automatically load data.
var datasource = app.datasources.Projects;
datasource.query.filters.Status._notEquals = 'Completed';
datasource.query.filters.Status._notEquals = 'Cancelled';
datasource.load();

Update shiny input from java script

I've looked around and tried a few things but I can't seem to get it to work. I want to be able to update the value stored in input$someVar from a bit of js code. What I need to on a certain element click, I need to update the input$someVar value. I know there are functions like "updateSelectInput()" but those are called from the server.
I can physically change the value of the data in the HTML that is used int he data attribute and that is displayed, but the server doesnt see this as a change and the input$someVar stays the same.
I have tried
var selectBind = Shiny.inputBindings.bindings[5];
selectBind.binding.setValue('#loc', newValue);
within an event handler, where #loc is the id of the input element, in hope that I could do it that way but this gives me an error.
Is there a way to do the functionality of "updateSelectInput()" within java script in the ui?
Yes, there is a way. Use the JavaScript function Shiny.onInputChange.
// change the value of an input
document.getElementById("id").value = "value";
// report the change to shiny
Shiny.onInputChange("id", "value");

Is there a way to know in what context Child Added is called? Particularly page load vs. other events

Here's my scenario. When child is added via a browser event post page load, I want to indicate it in the title. But on page load, child added is called as well.
How can I differentiate the initial child added vs one where a new entry has been actually added.
Thanks, Tim
Firebase very intentionally does not distinguish "initial" data from "new" data. This allows for much simpler development in most cases, because you only have to write one set of logic for your data, rather than handling both the initial data case and the new data case.
I can see how you would want the distinction in this case. I'm not sure exactly what you're doing, but if you're building a chat application, you might want to flash the title based on the timestamp of the most recent message rather than whether or not it's a "new" message. This would allow the title to flash on page load if a message was sent slightly before the page was loaded, which may be desirable. In some other cases, you may actually want to flash the title for unread data, and you may want to consider marking children as "read" and flashing the title only for children that show up without the "read" bit. This would allow things to work seamlessly across page refreshes.
If you absolutely need to know when "new" data shows up, you could try using "once" with a "value" event type to get the data, and then use "on" with a startAt query and a "child_added" event type to display new data after that. It would look something like this:
var data = new Firebase(...);
data.once("value", function(d) {
//TODO: display initial state...
data.startAt(null, <last id in snapshot>).on("child_added", function(newMessSnapshot) {
//TODO: render new child and flash title bar.
}
}
Or if you want to do it the really simple way, you could just set a timer so that the title won't flash for any messages received within the first N seconds of page load.
Hope that helps!
You can set up a call that only receives new events rather than ones already existing using the approach from this SO question.
So basically, call .on('child_added'...) with endAt and limit. You still get one entry (the last one), which you can just ignore:
// connect to firebase
var fb = new Firebase(...);
// retrieve the last record from `ref` (endAt() tells it to start at the end)
var first = true;
fb.child('table_name').endAt().limit(1).on('child_added', function(snapshot) {
if( first ) {
// ignore the first snapshot, which is an existing record
first = false;
return;
}
// all records after the last continue to invoke this function
console.log(snapshot.name(), snapshot.val());
});
I thought I would update Kato's answer as Datasnapshot.name() and limit have now both been depreciated.
I decided to make it a bit more simple as well ;)
// connect to firebase
var fb = new Firebase("https://your-firebase-ref/");
var firstTime = false;
fb.limitToLast(1).on('child_added', function(snapshot) {
if (firstTime) {
console.log(snapshot.key(), snapshot.val());
};
firstTime = true;
});
I hope this helps

How do you access a dynamically built select box's selected value with jQuery?

Is there a way to get the selected value (or text, or index) of a select box that the server fills (using ASP.NET) in the client? I've tried $("#ID").val() - but the only time that works is when I continue to another page and then go back. Even then, the value that is returned is the previously selected value - if the user changes the selection, it's not registered unless they leave the page and go back. Go easy on me, I'm new at this...
Update: Tried using a regular html select, same issue (just with a populated entry). Let me elaborate on what I'm trying to do: in a separate page, I'm getting results for an autocomplete search box. The select boxes are for filters. Naturally, if the user selects a filter, I don't want to suggest items that are no longer valid. I'm looking for the keys in the ProcessRequest method of the page that contains autocomplete info.
public override void ProcessRequest(HttpContext context)
{
string respString;
string qsKey = "q";
Customer searchCust = Session[Data.Selected_Customer] as Customer;
Dictionary<string, string> qsDict = context.Request.QueryString.ToDictionary(qsKey);
Shouldn't I get the results (for instance '&ID=foo' on the last line # context.Request.QueryString?
If you want the actual selected item itself:
$("#ID option:selected");
are you sure that 'ID' is really the id of the select box ? been awhile since i used asp.net but i remember it mucked with identifiers a lot
I use the code (below) to manipulate an ASP.NET generated select box. Within the code I obtain the value of the original select box (item). Also consider using the .text() function.
var setValue = function(item){
//if value isn't already selected, postback
if(input.value != item.text())
if(select.attr('onchange'))
eval(select[0].attributes['onchange'].nodeValue);
//set input box value
$(input).val(item.text());
$(input).removeClass('empty');
//select original ASP.NET select value (hidden)
select.val(item.text());
$(lookup).hide();
//show type if present
$('.selectType').show();
};
Hope this helps.

Resources