Databinding Hyperlinks in UX?

[rnrwang]

I have data fields with qualified URL. I don't see an option to bind a field to the control. What am I missing?
How can I implement "hyperlink" from a text label then...

[ecalan]

There may be simpler answers for hyperlinks (I would love to hear them as well) but whenever you need to inject formatted html into a component that includes a variable, like a standard hyperlink, you can construct it and place it with javascript of the general form:

function hyperlink() {

var myLink = {Dialog.object}.getValue('HYPERLINK_FIELD');

var src1 = "<a href='";
var src2 = myLink;
var src3 = "'>This gets you to a great page</a>"

var url1 = src1+src2+src3;
document.getElementById('div_by_id').innerHTML = url1;
//div can be dynamic as well for grids and panels etc.

}

The tricky part is getting the " marks correct. The " " that would normally enclose the hyperlink source field in HTML are replaced by splitting ' ' in the javascript with src1 in the example ending with ' " and src3 starting with " '.

This is also great for inserting iFrames if you want to use embed codes from sites like Google docs, twitter or Facebook. Just be sure to change all the " in the embed code for attributes like size to '.

[mikeallenbrown]

Here is a simpler answer: Use the label control and data bind it. In the label control's Click event see the screen shot below for the JS code to either navigate to it within the same window or open a separate window. You can the use CSS (style property) to get the label to behave as if it were a hyperlink.

Ashampoo_Snap_Thursday, August 19, 2021_06h27m56s_001_.png

[ecalan]

And that is why you listen to professionals instead of hobby guys like me. Mine is funner though.

[rnrwang]

Thanks guys. It's nice to have options. I believe I found my solution by using the Calculated field expression.


But I ran into another problem, which I want to hide the "View" hyperlink when the field is null.
Not sure why Show/hide expression is not working. Maybe evaluating my calculated expression instead of the source

Thanks for all the pointers.

[madtowng]

The show-hide rules hate circular rules.
In this case, you might want to use the onRenderComplete client-side event to determine whether or not to hide the control.

[ecalan]

I see you did not use my suggestion or Mike’s but your show hide should work if you make the calculated field just ‘View’ with styling to look like a link and use Mike”s on click suggestion. Or, with mine, use an if-else to test your len(field)>0 expression before the innerHTML code.