Simple example for "Variables" inside a note?

[netnem]

I am trying to create a note that has "variables" in it.

I want to be able to define certain things at the top of a note, and have them listed in the bottom of the note (or a different note is OK too). Something similar as:

$router_name = "main-campus-router"

I'd like to code the note so that it can use this variable name:

conf t
hostname $router_name
end

So that that "actual" note lists the variable:
conf t
hostname main-campus-router
end

What feature set do I need to be reading about on how to accomplish this? I've tried with "promoted attributes", but to no avail. I know there is the JS Frontend and Backend, but I don't know JS well enough to get the const variable to "print" into the note. If this is the right feature for this, can a very simple example be provided?

[netnem]

I was able to cobble together the following HTML code/render note to get the desired results but is there an easier way to do this?

<script>  
var routername = ("Cisco00-R1");
var location_name = ("Main Campus");
  
document.getElementById('output').insertAdjacentHTML('beforeend', "config t"); 
document.getElementById('output').insertAdjacentHTML('beforeend', "<br>");
document.getElementById('output').insertAdjacentHTML('beforeend', "hostname " + routername);  
document.getElementById('output').insertAdjacentHTML('beforeend', "<br>");
document.getElementById('output').insertAdjacentHTML('beforeend', "snmp location "+ location_name);  
document.getElementById('output').insertAdjacentHTML('beforeend', "<br>");
document.getElementById('output').insertAdjacentHTML('beforeend', "write mem");  
 
</script>

<div id="output">

[zadam]

The way I would approach it would be to use promoted attributes to define the attributes.

And then frontend JS + render note to print out the final text with interpolated variables. You can access the (promoted) attributes from frontend JS like this:

api.originEntity.getLabelValue("routername");

[netnem]

Here's the best I came up with in case anyone else wants to make something similar:

~renderNote=template #hideChildrenOverview #label:RouterName=promoted,single,text #RouterName=router2 ~runOnAttributeChange=Router Config Generator #label:LocationName=promoted,single,text #LocationName=Datacenter