While attempting to create a URL in Oracle APEX JavaScript using a template literal, I encountered an issue where the variable was not interpolated correctly. Rather than obtaining the expected URL, the variable name appeared distorted.
Here is what I am currently doing:
const test = `url("f?p=&APP_ID.:1:&APP_SESSION.:APPLICATION_PROCESS=GETIMAGE:NO::IMAGE_ID:1745")`;
console.log(test);
This results in the following functional URL:
url("/ords/r/pj/employee-self-service-portal/home?image_id=1745&request=APPLICATION_PROCESS%3DGETIMAGE&session=890152562441&cs=12Y_buvBPIPUg6fQgAiURQM6QvOyCwIKjlcewXmOTiJMfdOkwT0QubRWuzmRHaSAuwXBtH4iDjQl1YMNWm72OXw")
Now, my objective is to utilize a variable instead of hardcoding 1745.
For instance:
const imageId = 1745;
const test = `url("f?p=&APP_ID.:1:&APP_SESSION.:APPLICATION_PROCESS=GETIMAGE:NO::IMAGE_ID:${1745}")`;
console.log(test);
This outcome displays:
url("/ords/r/pj/employee-self-service-portal/home?image_id=%24%7BimageId%7D&request=APPLICATION_PROCESS%3DGETIMAGE&session=890152562441&cs=1dtlavkb6EP2nlZk9_KxMOcV6GSGzUTtKOAYodnsYe-DshAwwwSIr-pVAqpEb82XGSIHELUFeWMdJxKc5LrrAJQ")
The variable indeed remains unset
The AJAX process follows as such (an Application Process):
DECLARE
l_lob BFILE;
v_pic blob;
l_length NUMBER;
BEGIN
--
select picture into v_pic from pjpayroll.hremp WHERE pkcode = :IMAGE_ID ; --461;
l_length := DBMS_LOB.getlength(v_pic);
htp.flush;
htp.init;
htp.p('Content-length: ' || l_length);
htp.p('Content-Disposition: inline; filename="&REQUEST."');
owa_util.http_header_close;
wpg_docload.download_file(v_pic);
EXCEPTION WHEN OTHERS THEN NULL;
END;
I am aiming to develop an Organization Chart utilizing the third-party d3.OrgChart Library
var chart;
function fetchDataAndShowAlert() {
d3.csv(
'#APP_FILES#TEST.csv'
).then((dataFlattened) => {
chart = new d3.OrgChart()
.container('.t-Body-mainContent')
.data(dataFlattened)
.nodeHeight((d) => 85)
.nodeWidth((d) => {
return 220;
})
.childrenMargin((d) => 50)
.compactMarginBetween((d) => 25)
.compactMarginPair((d) => 50)
.neightbourMargin((a, b) => 25)
.siblingsMargin((d) => 25)
.buttonContent(({ node, state }) => {
return `<div style="px;color:#716E7B;border-radius:5px;padding:4px;font-size:10px;margin:auto auto;background-color:white;border: 1px solid #E4E2E9"> <span style="font-size:9px">${
node.children
? `<i class="fas fa-angle-up"></i>`
: `<i class="fas fa-angle-down"></i>`
}</span> ${node.data._directSubordinates} </div>`;
})
.linkUpdate(function (d, i, arr) {
d3.select(this)
.attr('stroke', (d) =>
d.data._upToTheRootHighlighted ? '#152785' : '#E4E2E9'
)
.attr('stroke-width', (d) =>
d.data._upToTheRootHighlighted ? 5 : 1
);
if (d.data._upToTheRootHighlighted) {
d3.select(this).raise();
}
})
.nodeContent(function (d, i, arr, state) {
const color = '#FFFFFF';
return `
<div style="font-family: 'Inter', sans-serif;background-color:${color}; position:absolute;margin-top:-1px; margin-left:-1px;width:${d.width}px;height:${d.height}px;border-radius:10px;border: 1px solid #E4E2E9">
<div style="background-color:${color};position:absolute;margin-top:-25px;margin-left:${15}px;border-radius:100px;width:50px;height:50px;" ></div>
<img src="f?p=&APP_ID.:1:&APP_SESSION.:APPLICATION_PROCESS=GETIMAGE:NO::IMAGE_ID:1745" style="position:absolute;margin-top:-20px;margin-left:${20}px;border-radius:100px;width:40px;height:40px;" />
<div style="font-size:15px;color:#08011E;margin-left:20px;margin-top:32px"> ${
d.data.name
} </div>
<div style="color:#716E7B;margin-left:20px;margin-top:3px;font-size:10px;"> ${
d.data.positionName
} </div>
</div>`;
})
.render();
})
}
Although it is functioning, all images are associated with the ID 1745. My intention is to make it dynamic by passing the value from d.data.id instead of 1745.
Looking forward to responses.