Adobe DTM - Accordion link click tracking - javascript

I have a accordion link with plus symbol. When the user clicks on the plus symbol, then the accordion will expand .
Can anyone help me out how to get the text of the accordion using the Event based rule in adobe DTM.
Note: On click of Accordion symbol, the page will not load. It stays on the same page only accordion exapands.

This is done via an event-based load rule.
Depending on how your element is embedded in the code, you need to address it.
For instance, if it is a class, you need to address it via .class_name.
As you are using DTM, I assume that you are using Adobe Analytics. Therefore, you need to create an eVar to which the value of the Accordion click is passed.
Furthermore, you need to set a custom code, which tells Adobe to write this value into the eVar.
This could be an example:
var label = $(this).attr("id");
_satellite.setVar("Label",label);
return true;
This code tells Adobe to get the attribute id and pass its value into the variable label.
As the last step, you need to map the evar to %Label% that the name of the part of the Accordion is passed to AA.
Good luck :)

Related

Modify Field In On Instance In LiveCycle

I'm working in LiveCycle creating a form that allows the user to duplicate a sub form as they need. In that set of fields there is a dropdown and if it is set to certain values a field that is normally hidden should display. I only want this to display in that instance of the sub form that they made that selection. So my question is how do I determine which instance fired off the event? If I get that I think I can go from there with making the change.
I'm still new to LiveCycle and the resources out there are scattered at best. Any help is appreciated.
PS I'm using Javascript and not FormCalc.
the easiest way is to use built-in functionality that helps you to address proper objects in your code. When you are typing your code in the script window, just hold Ctrl and mouse click the object you want to refer your code to. It will generate a correct short version DOM name for that object. If you hold Ctrl-Shift and then click, you'll get a full DOM address for that object.
For example, you have a 1-page form that has a subform, which can get multiple instances. Inside that subform you have a drop-down "Selector" which controls visibility of the text field called "Weight". Your DOM addresses will look like follows
form1.page1.subform.Selector - this is your drop-down
form1.page1.subform.Weight - this is your text field
Now because your script is located inside of the object in the same subform that has also the object you want to control, you don't even need to pay attention of any instance numbers.
In your script window of form1.page1.subform.Selector just type
if (this.rawValue == "Yes"){
Weight.presence = "visible";
}
It will address only the object that is located in the same subform with your drop-down controller.

Change People Picker in NewForm.aspx Share Point IFRAME

I am new to SharePoint and need some assistance. I have a webpage written in normal HTML and JavaScript with an IFRAME that contains a SharePoint page. When the webpage loads, it contains the user's name in a hidden field. I am trying to make it so when a person clicks a button on the webpage it sets the People Picker to the text input's value from my webpage (the user's name). I tried to pull the ID of the textarea element of the SharePoint People Picker in the IFRAME and use normal j Query to set the value of the textarea of the People Picker, but it doesn't work. Any ideas? I am trying to input it on NewForm.aspx.
In the Webpage, I have a hidden input with the id 'hiddenUser' that pulls the SharePoint user's name in this format = 'Jackson, Joseph'. That works fine; although, I am not sure if that is the best way to do it. Assuming the hiddenUser input has a value, this is what I was using to try and set the People Picker:
var userPosting = $('#hiddenUser').val();
$('#newForm').contents().find('#ctl00_m_g_ffa4fb44_5605_472f_b10f_ba47d0267de5_ctl00_ctl04_ctl19_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_downlevelTextBox').text(userPosting);
'newForm' is the ID of the IFRAME on my webpage. I also tried .val instead of .text and it didn't work. Any suggestions? There are multiple People Pickers on the SharePoint form.
It's possible for an embedded page in an iframe to talk to the containing parent page, but the parent page can't talk to the child unless the child explicitly allows it. JavaScript in the embedded page can refer to a parent object.
Check out this similar answer:
There is a way. When the page in the iframe loads, have it do the following
parent.childGetElementById = function (id) {return document.getElementById(id);}
parent.childLoaded();
This will make a function in the global scope of the parent page (that contains the iframe). Then in the parent, just have the following
function childLoaded() {var dom = childGetElementById('someid');}
This is along as you have control of the page your loading into the iframe... if you do not, you are out of luck.

How do I make my own simple social media buttons that grab the current URL automatically?

Facebook, Google+, and Twitter (I've not checked or tested any other platform, but if they provide a "share URL" then they should work as well) all provide pre-built JS buttons that, for many different reasons, a lot of people do not want to use. Whether it's because you want to use your own custom icon, or you don't like how much code they use, or you don't like how they function, or any other reason.
These social media platforms also, however, provide a simple alternative that allows you to use your own custom icon and are very very simple in how they work on the web developer side. (The Facebook documentation on their developer page does not reflect the method that I'll be using, as they no longer "support" the old "share URL". It does, however, still work for now, and the principle remains the same if you wish to use their new manual "share URL").
The way they work are quite simple in principle: They provide a URL with syntax on the end that allows you to manually type the URL that you would like to share. The problem with this solution is that you would have to manually type in the URL of each page every time. And if you are using PHP includes or SSI for your share button (which I am doing), then it's not only not feasible, but it's impossible because you only have one instance of the share button that exists.
So how would one be able to make their own simple social media sharing buttons that will automatically grab the current page's URL?
This solution should work on ANY social media platform that gives you a custom share URL (that is to say, a url that allows you to manually type in an address to share).
Here is how it all works (and if anyone has any suggestions or tweaks that have more experience with JS, please let me know).
I assign variables to the document.URL and document.titleproperties.
I write a named function (I called mine, socialShare) that is set to run via an anonymous function on the window.onloadevent.
The socialShare function assigns variables to the location of my social button's within the HTML. In my case, I used IDs to locate the elements. The purpose of these variables is purely for aesthetics (I use these variables to re-write the the HTML code dynamically, so that when you hover over the share button, it displays the correct URL for sharing the current page you are on)
var fbShare = document.getElementById("fbShare");
var gplusShare = document.getElementById("gplusShare");
twitterShare = document.getElementById("twitterShare");
I then write three separate anonymous functions, one for each social media platform. Each function has two statements. The functions work as follows: the first part is the variable assigned to the location of the HTML element with the ID fbShare. The second part tells it to run the function when that element is clicked; .onclick. The third part is the anonymous function that will run when that element is clicked. The first statement of this function will open a new window; window.open; and in that new window, it will open the URL that is specified by feeding the window.open method parameters. The parameters are as follows (URL,name,specs) where URL is the URL you want to share, name is optional and left blank as seen by the empty set of quotes, and finally specs is where you specify attributes of the window (IE: width and height). The first parameter, the URL: ("https://www.facebook.com/sharer.php?u="+currentURL, currentURL is the global variable that was assigned earlier and will place whatever the current documents URL is, in place of currentURL. The second parameter, the name: "", This is left blank, as it is optional. The third parameter, the specs: "height=368,width=600,left=100,top=100,menubar=0"); These are a comma-seperated list of items. In my case, I've specified a height, width, and the location of the window, as well as disabled the menubar. Finally, the second statement, return false; tells the browser NOT to follow the link inside the HTML code. If this was not specified, then the browswer would follow the URL in the HTML, AND open a new window. For more information on the window.open method, please see the link at the bottom of this new answer.
fbShare.onclick = function() {
window.open("https://www.facebook.com/sharer.php?u="+currentURL,"","height=368,width=600,left=100,top=100,menubar=0");
return false;
}
gplusShare.onclick = function() {
window.open("https://plus.google.com/share?url="+currentURL,"","height=550,width=525,left=100,top=100,menubar=0");
return false;
}
twitterShare.onclick = function() {
window.open("https://twitter.com/share?url="+currentURL+"&text="+currentTitle,"","height=260,width=500,left=100,top=100,menubar=0");
return false;
}
And finally, I modify the HTML href elements of each social media button so that when the user hovers over the share buttons, they see the correct Share URL displayed in their browsers status bar. The first part of this statement grabs the element id, fbShare and the second part tells it to set an attribute, .setAttribute. Then we pass in the attribute name that we want to change, ("href", in this case, and then we pass in what we would like the new attribute value to be, "http://www.facebook.com/sharer.php?u="+currentURL); currentURL is the same here, as earlier. It is the variable that holds the value for whatever the current page's URL is.
fbShare.setAttribute("href","http://www.facebook.com/sharer.php?u="+currentURL);
gplusShare.setAttribute("href","https://plus.google.com/share?url="+currentURL);
twitterShare.setAttribute("href","https://twitter.com/share?url="+currentURL+"&text="+currentTitle);
That's about all there is to it! I hope I wrote this well and I hope it is relatively easy to follow. If any pros out there have any suggestions, please feel free to toss in and give your advice! :)
My JS file
http://jrltest.host-ed.me/_js/share.js
Link to information on the window.open method at w3schools.com
http://www.w3schools.com/jsref/met_win_open.asp
Link to information on the .setattribute method at w3schools.com
http://www.w3schools.com/jsref/met_element_setattribute.asp
I hope that this will help someone!

Append a word to title of Google Calendar event using javascript bookmarklet

I maintain a google calendar for 4 branches.
I've currently got a little bookmarklet (actually 4) that let's me put in the precise address with a simple click. However I'd like to add to the functionality so that when I click the button it adds the name of the branch to the end of the title in addition to pasting in the appropriate address. I'd like to add code to this so when I click it, (Headquarters) is appended to the end of the title.
javascript:var a=document.getElementsByClassName('textinput')[1];a.value='Headquarters Branch, Street, County, State, 12345';var e=document.createEvent("HTMLEvents");e.initEvent('change',true,true);a.dispatchEvent(e);void(0);
Bonus: By default the calendar selector is set to headquarters. If I could also change that to the appropriate branch when I click one of the others that would be fantastic!

Javascript menu remembering position

I am currently working on a JS menu for a web app. It consists of two bars, the fixed main one and the submenu which is activated (display:block from display:none) by Javascript function. The selected options of the main menu as well as the submenu are also highlighted by adding a class="main_on" and class="sub_on" by onclick event. Is there way of remembering which submenu was displayed and which options were currently classed as active when the user hits F5 or the page reloads itself? I am looking for a non-cookie and non-database approach if possible.
Thanks,
Mike
You can make the link/element that is clicked (for the onclick event) set the URL hash in the address bar. (i.e. http://server.name/page#URLhash) If it's a link you just have to adjust the HREF property, otherwise you may have to manipulate with window.location.
This sets the current state. When the page (re)loads, check the value of the URL hash. See http://developer.mozilla.org/en/DOM/window.location for details on how to access it. Provided the URL hash is still in the address bar, you'll be able to get the value.
Then use the value to determine which menu to make active. Thus you can restore the state this way.
There are some differences between browsers. Do a search on "Ajax History", in which some people have used the URL hash to preserve the state after Ajax actions. Not the exact same problem you are trying to solve but similar. Check out RSH:
http://code.google.com/p/reallysimplehistory/
The same ideas will be used.

Categories

Resources