Dynamic URL in HTML object Topic is solved

[Paul]

Desired outcome:
Depending on what the user enters into 'pk_AutoLyseDuration' field, change the URL in 'AutoLyse Timer URL' (pk_AL_TimerURL). 'AutoLyse Timer URL' needs to be a clickable URL.

AutoLyseTimer.PNG

Here is 'pk_AL_TimerURL' so far:

object: pk_AL_TimerURL

onchange event:
const AutoLyseMap = {
'.5': 'http://localhost/recipes/30-minute-timer/',
'1': 'http://localhost/recipes/timer/',
'2': 'http://localhost/recipes/2-hour-timer/',
'3': 'http://localhost/recipes/3-hour-timer/',
'4': 'http://localhost/recipes/4-hour-timer/',
'5': 'http://localhost/recipes/5-hour-timer/',
'6': 'http://localhost/recipes/6-hour-timer/',
'7': 'http://localhost/recipes/7-hour-timer/',
'8': 'http://localhost/recipes/8-hour-timer/',
};

const name = nuGetValue('pk_AutoLyseDuration'); //
nuSetValue('pk_AL_TimerURL', urlMap[name] || ''); //

What would I enter into the HTML area to accomplish the desired outcome?

[steven]

Hi Paul,

If you are familiar with JavaScript and/or jQuery,

you can use their functions to change different elements...

Code: Select all

const url = '<a href="' + $('#pk_AutoLyseDuration').val() +'">' + ' Click Me.</a>'';

$('#pk_AutoLyseDuration').html(url);

Steven

[Paul]

When I place your code into the HTML tab of pk_AL_TimerURL, I get this on the form:

ALTimerLink.PNG

The link in the status bar is:
http://localhost/nubuilder/'+%20$('#pk_ ... ).val()%20+'

[steven]

Paul,

That code goes on the on blur event of your element pk_AutoLyseDuration.

Not in the HTML.


Steven

[Paul]

Not sure if you understand my intended result. Re-read my original post?

[kev1n]

How about this? (Place it in the onblur or oninput event of pk_AutoLyseDuration)

Code: Select all

const AutoLyseMap = {
    '.5': 'http://localhost/recipes/30-minute-timer/',
    '1': 'http://localhost/recipes/timer/',
    '2': 'http://localhost/recipes/2-hour-timer/',
    '3': 'http://localhost/recipes/3-hour-timer/',
    '4': 'http://localhost/recipes/4-hour-timer/',
    '5': 'http://localhost/recipes/5-hour-timer/',
    '6': 'http://localhost/recipes/6-hour-timer/',
    '7': 'http://localhost/recipes/7-hour-timer/',
    '8': 'http://localhost/recipes/8-hour-timer/',
};

const url = nuComposeURL(AutoLyseMap[this.value] || '', 'Click Me');
nuSetValue('pk_AL_TimerURL', url, 'html');

[Paul]

Putting that in the onInput event worked. Excellent! Thank you, Kevin!

[Paul]

It works, but the link dissappears when I save the record. I'd like to be able to save the html and then overwrite it (if there are changes) each time the record is saved.

[kev1n]

HTML elements are not stored in the database (they are display-only objects).

One option is to call setTimerURL() both in the pk_AutoLyseDuration change event and in the form’s Custom Code when the form is loaded.

Code: Select all

function setTimerURL() {

	const AutoLyseMap = {
		'.5': 'http://localhost/recipes/30-minute-timer/',
		'1': 'http://localhost/recipes/timer/',
		'2': 'http://localhost/recipes/2-hour-timer/',
		'3': 'http://localhost/recipes/3-hour-timer/',
		'4': 'http://localhost/recipes/4-hour-timer/',
		'5': 'http://localhost/recipes/5-hour-timer/',
		'6': 'http://localhost/recipes/6-hour-timer/',
		'7': 'http://localhost/recipes/7-hour-timer/',
		'8': 'http://localhost/recipes/8-hour-timer/',
	};

	const url = nuComposeURL(AutoLyseMap[nuGetValue('pk_AutoLyseDuration')] || '', 'Click Me');
	nuSetValue('pk_AL_TimerURL', url, 'html');

}