on click event, open an .a5w page, static HTML page, URL, or PDF document

[carlbsmith]

I am working on a UX component, and I have a list control. I want users to be able to click on items in the list, and that will go to a corresponding URL. Each item in the list will have it's own URL.

I was going to do an onClick event that opens the URL, but rather than just a static URL, I want to use a placeholder for field value, see attached image:

open_URL.JPG

My question is, how do you do that? I created a placeholder control, but I don't know how to make that placeholder hold the URL information in my table. I know that is probably a simple question, but I just don't see how I can bind the two together. I was looking at the data binding table, but I can only bind variables to fields in my table, and I guess a "placeholder" is not considered a variable, so it doesn't show up in the list to bind.

[Davidk]

Re: on click event, open an .a5w page, static HTML page, URL, or PDF document

Do you really want to call that action... or would you rather do this...

var linkURL = this.selectionData[0].WebsiteLink;

var ref = window.open(linkURL, '_blank', 'location=yes');

onClick event of a List Control where the field "WebsiteLink" contains a valid URL. window.open has a few different parameters.

[alexc]

Re: on click event, open an .a5w page, static HTML page, URL, or PDF document

Hey my solution is similar but i utilise a reusable function at the UX Level

Have have link to other Pages within my Lists. I use a Javascript Function declared at the UX Level

function openURL(url) {
// function takes the passed in url and redirects the user

var src = url;
window['{grid.componentName}_O_9FE6A8F4518A400C8623C22F37BE803C'] = function(rowNum,rowId,objEle) {
window.open(src,'_self','');
}

{grid.componentName}_O_9FE6A8F4518A400C8623C22F37BE803C({grid.rownumber},'{grid.rowId}',this);

}

Of course this redirects the user if you want a new tab in browser then replace '_self' with '_Blank'

In the List i just call this function

var linkedURL = this.selectionData[0].linkedUrl;
openURL(linkedURL);

Despite the Grid References this works correctly and as expected in the UX

[Davidk]

Re: on click event, open an .a5w page, static HTML page, URL, or PDF document

I don't really understand. Transferring the code to a function is ok... but why all the grid stuff? Is there a benefit?

function openURL(url) {

	// function takes the passed in url and redirects the user
	window.open(url,'_self','');

}

[alexc]

Re: on click event, open an .a5w page, static HTML page, URL, or PDF document

David

Its the Code you get when you convert the Action JavaScript. It could of easy been anything inside that window variable

window['Anythingthere'] = function(rowNum,rowId,objEle) {
window.open(src,'_self','');
}

just wanted to make it unique :)

I think at the time i saw that the only benefit is that it produces a way for the UX to know about the window object so it can control it.

[Davidk]

Re: on click event, open an .a5w page, static HTML page, URL, or PDF document

Right... I understood where it came from... but why does the UX need to control the window... and in control it in what way? What does that let you do?

[alexc]

Re: on click event, open an .a5w page, static HTML page, URL, or PDF document

If i use _blank I can use it to tell when the user has closed the window or actually close the window or switch back to the original tab window. All methods available for the window object are here. https://www.w3schools.com/jsref/obj_window.asp

[Davidk]

Re: on click event, open an .a5w page, static HTML page, URL, or PDF document

Ok... thanks... now that I know why you want to assign a function to a window variable, then I'd suggesting dumping all the baggage you're sending along. 'objEle' and 'this' create and enormous amount of data that's getting passed around... and you don't need it. Plus... the grid stuff is just simply confusing. If you really want the component name in there, use {dialog.ComponentName} instead... it reads so much better.

function openURL(url) {
	// function takes the passed in url and redirects the user

	window['funcOpenURL'] = function() {
		window.open(url,'_self','');
	}

	funcOpenURL();

}

[alexc]

Re: on click event, open an .a5w page, static HTML page, URL, or PDF document

Yes you are not wrong there lots of Baggage :). I will update the function :) And to think this is what the cost is when you use action javascript. Great discussion David

[carlbsmith]

Re: on click event, open an .a5w page, static HTML page, URL, or PDF document

Thanks again David, exactly what I was looking for.

[carlbsmith]

Re: on click event, open an .a5w page, static HTML page, URL, or PDF document

Could this same code be applied to a detail view of a list? Or would it only work on the actual list? So in other words, have a control in the detail view of a list that has an onclick event to open a URL.

[Davidk]

Re: on click event, open an .a5w page, static HTML page, URL, or PDF document

In the case of a Detail View, you could still go after the List Control using {dialog.Object}.listGetValue(UXListName, ListFieldlName); as in...

var url = {dialog.Object}.listGetValue('list1','WebsiteLink')

Or... if you're Detail View has a control showing the List FieldName, then use .getValue to access it.

[RichCPT]

Re: on click event, open an .a5w page, static HTML page, URL, or PDF document

There is probably some sort of trick to get the following to work; it seems simple enough and it sounds like it should work, but alas it doesn't work for me.

To generate items in a LIST control as hyperlink fields:

1) In the field list for the LIST, set the data type to "Raw data" (rlLinkPath in example below).
2) If there is a description field in the LIST to go along with the URL, set it's data type to "Raw data". (rlResource_Title in example below.)
3) Add the description field into the LIST Layout properties. (If no descr field then add the URL field).
4) For that field, set the Template to something like:

<a href="{rlLinkPath}" target="_blank" >{rlResource_Title}</a>

Run the component in Live Preview and look at the generated source. You should see a valid hyperlink field in the LIST. The LIST is doing something that prevents the hyperlink from working, if you could override the LIST's behavior then this should be a simple solution.

The Viewbox would be another place this type of thing should work, but I do imagine you would have to create an "item" for a pseudo-hyperlink and put in the JavaScript to open the target URL. I imagine the Viewbox is even more aggressive at trapping events and doing its own thing, unless you define "items" for the ViewBox with their own event handlers.

[carlbsmith]

Re: on click event, open an .a5w page, static HTML page, URL, or PDF document

David, that works great. My URL is actually pointing to a PDF file in this particular case. So when I run the UX in a browser, of course it loads the PDF fine. In the Phone Gap build, I will probably have to use the cordova plug to open the PDF as a native file. So my current setup is that onclick, I've chosen the 'Phonegap - open file with native application javascript action'. And then I am using javascript:geturl to call some additional javascript. Here is that function:

function geturl() {

var linkURL = {dialog.Object}.listGetValue('camera_list','DATA_SHEETS');

var ref = window.open(linkURL, '_blank', 'location=yes');

}


Seems like that should work, but it does not for some reason.

Or maybe instead of using cordova, I can tweak the window.open function to somehow go outside of the app to a web browser to open the PDF?

[carlbsmith]

Re: on click event, open an .a5w page, static HTML page, URL, or PDF document

Ok, so here is what I learned after testing. If I apply David's initial code as an onclick event in the list:

var linkURL = this.selectionData[0].WebsiteLink;

var ref = window.open(linkURL, '_blank', 'location=yes');

I can reference a URL that has a PDF file (loaded on my server), and it works fine. From inside the Phonegap app, it goes external to a browser, and loads the PDF.



However, when I try to do a URL link to the same PDF, but from the detail portion of the list using the following:

var linkURL = {dialog.Object}.listGetValue('list1','WebsiteLink')
var ref = window.open(linkURL, '_blank', 'location=yes');


Nothing ends up happening from withing the Phonegap app. However, if I pull up the UX inside a browser instead of Phonegap, I can get the onclick event to work and it opens up the PDF no problem.


Just trying to figure out the difference above. From within the Phonegap app, why does one method go to an external browser to open the PDF, but the other method does nothing at all. Thanks.