So if I have a customer lookup fragment form (i.e. name to lookup and displays address), then need a page with a from and to customer, is there a way to isolate the data binding so that both can be individual?
Currently I can only get the same data to show up in either and so changing one effects the other.
You can override page fragment's datasource:
Once you check 'Override page fragment datasource' checkbox, datasource property will become editable.
Ah got it! In part to what #Pavel responded with....
So in the fragment, the data source is set up pretty much normally:
In the inserted fragments, settings are as follows:
- over-ride checked
- datasource: #Datasources.Addresses.items
Both fragments now act individually on selected name.
Related
I was asked to capture the analytics on a website. The website is made up of 5 web pages, but I now realize that the domain is the same and the only thing that changes is the URL fragment, i.e. www.domain.com#a, www.domain.com#b. The only info that comes through to GA is the domain and it does not include the URL fragments. The tracking code I'm using is Tealium and the data is being sent back to Google Analytics. How can I set this up so that i can see the entire URL in GA including the URL fragments?
So, from Tealium's perspective we need to trigger a view event when a new fragment is loaded (if I am understanding this correctly).
If we assume that the fragment change occurs on a link click then we need to trigger the view event when the link click occurs.
From the GA perspective, we need to trigger a view that captures the new information. For a view this is likely to be location, path and title.
Therefore, we need Tealium to construct the new data points and then pass them in a view event to GA.
The simplest way to do this in Tealium (all things being equal) is via a jQuery onHandler Extension
The jQuery extension requires the following information:
jQuery selector (or selectors) to pay attention to
"Trigger On" event type (this will be Click in this example)
Tracking event type to run (View event in this case)
Variable & values to set
Tealium jQuery onHandler extension config
note it's always a good idea to set a condition on your jQuery extensions so that they only run when needed instead of all the time and everywhere
In this extension, I have set the following:
jQuery Selector: '#MyID_1, #MyID_2, #MyID_3' -- yes you can pass a list of selectors or nearly any other valid jQuery selector statement
Trigger On: 'click'
Tracking Event: 'view'
3 Variables:
a. 'page_name' : $(this).text(); //get the link text
b. 'my_url' : utag.data['dom.url']+$(this).attr('href') //building the full URL including the fragment
//utag.data['dom.url'] is a variable/datapoint that Tealium automatically generates
c. my_path : utag.data['dom.pathname']+$(this).attr('href'); //building the path
//utag.data['dom.pathname'] is a variable/datapoint that Tealium automatically generates
NOTE: make sure to set the type for each these to "JS Code" otherwise your JavaScript will be quoted out as a string.
Why these three variables? As I understand GA, these are the values it would expect for a new page view -- location/URL, path, and Title so we are constructing those values in the extension to pass them to GA on the view event.
Now, we just need to map these new variables to GA.
my_path gets mapped to page in the GA mapping toolbox
page_name gets mapped to title
location isn't a default option in the mapping toolbox so we need to add a custom destination variable called location and map my_url to it.
custom variable mapping for GA
That's how you do it from within Tealium and minimal coding. If for some reason you don't want to / can't do it inside of Tealium, this provides us with a very nice template for a custom function to add to our codebase:
`$(document.body).on('click', '#altID', function(){
utag.view({
"page_name": $(this).text(),
"my_url": utag.data['dom.url'] + $(this).attr('href'),
"my_path": utag.data['dom.pathname'] + $(this).attr('href')
})
})`
See both in action over here at CodePen.
I have an AppMaker app that has a from based off of one address table/datasource. I can get a form with next/prev buttons, but replaced the key field (name) with a dropdown list of all names (a user can start typing names to jump there, with the dropdown showing).
My hope is that when a user selects from the dropdown, the entire form updates and the next/prev buttons work properly as well (there too many records to page thru with next/prev only). I don't have to have next/prev functionality if it complicates things too much.
Currently the dropdown is working, but I cannot get the index for the next/prev buttons set or the rest of the form to reflect the selected dropdown record.
I've tried to set the "onValueEdit" event to something like this...
var selected = widget.value;
var idx = widget.options.indexOf(selected);
console.log("Selected: "+selected+", index = "+idx+"\n");
if(idx < 0) { //...this error is never hit
console.log("Index error - setting to zero!\n");
idx = 0;
}
widget.datasource.loadPage(idx); //...update form?
Two observations via console logging:
The "idx" var is never set to the selected dropdown index reliably, and is
often "0" (tho no error msg ever shows), so the "indexOf()" function
isn't working as expected.
The "selected" var (name) is always correct.
If I call widget.datasource.loadPage(...) with a fixed value (say 5) it has no effect on what is shows in the form either (previous loaded data remains) - obviously not the way to do it :v/
Can you steer a noob in the right direction?
If you are using default App Maker form, then you can see that so-called pager, doesn't actually paginate. It triggers prevItem/nextItem datasource methods, in other words it navigates through datasource items, not pages. Here is a quote from App Maker docs:
nextItem: Selects the next item. For Query Datasources, if the current item is the last item on the page, then this loads the next page and selects the first item on the newly loaded page.
So, if you already have all your items loaded(you set query page size for your datasource to 0), then you need just to change selected item within datasource:
// onValueEdit dropdown event
// assuming, that form and dropdown share same datasource
widget.datasource.selectKey(newValue._key);
If you really have lots of items and it is not feasible to load all of them in one call... then it will be all another story...
UPDATE:
It's important that Options and Value are set as shown in the image below!
However, I had trouble setting them that way (read: wasted hours!) until I wiped them both completely using More options in the binding picklist, and tried again (I had even tried on a brand new app!). I was being forced to choose ..projections.. and then a final field before the OK button would be available.
Not sure if AppMaker is buggy here or there is something simple I'm not understanding!
None of the coding in my original question is required.
Once set this way, binding just works as you would expect it!!
All other fields are set as #datasource.item. and are bound to whatever item is chosen. No Events settings are necessary for the dropdown either, as I thought they might be.
I deleted this page and started again, and replaced the default business name data field with a drop down, I set the dropdown as:
Options: #datasources.Addresses.items
Value: #datasources.Addresses.item
It works fine?! Not sure what happend in my original page!
UPDATE:
So it seems you need to delete both the Value and Options and then re-enter these. The OK will light up when you do.
Also, my original take on App Maker was to build the UI and attach data. That was my first mistake. You build the data then have App Maker build edit/add pages for you.
I seem to be struggling with this. I am working on a project management app in Google App Maker. I am using SQL data models. The portion of the app I am having trouble with is several project detail pages linked with a project list page. I have no trouble going from the project list page to the first project detail page.
I have a table widget in the project list page, and the onClick code for a table row is:
app.datasources.Projects.selectKey(widget.datasource.item._key);
app.showPage(app.pages.ProjectPage);
This filters the first detail page with the primary key of the record in focus. No problem here. When I want to navigate the next detail page that has a different datasource (but I still need to filter using the same primary key) I am struggling.
If someone can guide me in making a button in the first detail page that when clicked gets the _key of the project loaded in that current page and filters another detail page for the same project in focus, (using another data model, let's call it ProjectBudgetPage for example) I would really appreciate the help.
This was one my latest attempts at navigation to other detail pages within a project, this was for an onClick event:
var widgets = widget.parent.descendants;
var projectID = widgets.HiddenProjectID.text;
var projectDataSource = app.datasources.ProjectBudgetView.item;
projectDataSource = projectID;
app.showPage(app.pages.ProjectInfoPage);
which results in: (TypeError) : Cannot read property '__gwt_instance' of undefined
at HeaderProjectTabs.HeaderContainer.InfoTabButton.onClick:5:5
I am not sure if I understood properly but I suggest that you start by checking this official App Maker template available here https://developers.google.com/appmaker/templates/partner-management/ which provides a ready-to-run app you can use to manage an internal list of partners, but you can also customize it with your own needs. I recently used most of the UI and logic of this template and I was able to integrate it with SQL data models and it works really great.
I noticed that for this template they are saving the (widget.datasource.item._key) to a Page custom property which you can access afterwards. Custom properties are page-level properties that store data for a single user session. Custom properties are useful when you need to bind properties of multiple widgets to a single value. More info available here https://developers.google.com/appmaker/ui/binding#custom_properties
In your scenario, you can create a new custom property (string) inside your ProjectInfoPage and then you can add a script to the button onClick event in your ProjectPage to save the _key or any other item to a page property. For example:
app.pages.ProjectInfoPage.properties.ProjectKey = widget.datasource.item._key;
app.showDialog(app.pages.ProjectInfoPage);
Then you can get the “ProjectKey” property by adding this to the onAttach event in your ProjectInfoPage:
var key = app.pages.ProjectInfoPage.properties.ProjectKey;
…
In the onAttach event you can filter the new model or pass the property values to a server script. I believe there are other approaches but I hope this helps!
In SharePoint I can tee up a binding to an edit field like this below. When the form posts back the changes are automatically persisted to the underlying list item.
<PublishingWebControls:RichHtmlField ID="Field1" FieldName="MySPListItemFieldName" ...
So this works great for RichHtmlFields, but say I've got a Yes/No (boolean) field in the same list item, is there a similar construct to bind that field to a check box control in a similar way?
My goal is to not have to throw down a line of c# to transfer the value of the control to the field, I want it to be automatic like RichHtmlField. It seems like there has to be a straight forward way of doing this since SharePoint does this itself with its internal list item editing page (EditForm.aspx).
What you're after is a BooleanField control on your form:
http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.booleanfield.aspx
Just set the FieldName to that of your Yes/No column, should work fine.
I know this is probably a very simple question, but can someone please walk me through how to take what a user inputs into a s:TextInput and use that as a variable in a JSON data request?
Basically, I want to have a user enter a search term, like "math" and then have that placed into a variable so I can use it in a JSON request.
Something like public var q:String, except that my search box (and hence user input) is on another "view" of the application.
I've just started with Flex Mobile applications and I might be way out of my league. Does anyone know how to do this?
The containing view should still be able to access teh child view's properties (and therefore controls); you just need the control(s) to have a unique ID, which then becomes a property name. That said, I would consider the whole search feature to be self-contained, so it'd have its own controller (action script class for handling actions) wired up to the search button, adn have a reference to the view that it can extract the info from, etc.