Hi ,
I have an HTML page and want to convert it into apex static content.
I have uploaded the 3 files that were referred in the header section of the HTML and included in the javascript file and css file sections #APP_FILES#d3.v7.min.js
How do I call the class the call in the static content section
<div id="ruler" class="test_ruler"></div>
and how do I include the script section as well.
I have a page item that included the JSON data. I want the ruler to display when user navigate to the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test Ruler</title>
<script src="d3.v7.min.js"></script>
<script src="test_ruler.js"></script>
<link rel="stylesheet" href="ruler.css" />
</head>
<body>
<h3>Ruler Demo Page</h3>
<h5>Enter JSON data</h5>
<textarea id="sampleData"></textarea> // remove this so that value will be passed from page item
<br>
<button id="drawContextRuler">Draw Context Ruler</button>
// want to remove the button so that it can load when page refresh
<br><br>
<div id="ruler" class="test_ruler"></div>
<script>
const rulerEl = document.getElementById("ruler");
const oConfig = {
width: 800,
height: 300,
size: "full",
}
d3.select("#drawContextRuler").on("click", () => {
const data = JSON.parse(document.getElementById("sampleData").value); // want to repalce sampleData with page item P1_JSON
console.log("Data", data);
// draw the context ruler with the div, config and data properties
createContextRuler(rulerEl, oConfig, data);
})
</script>
<style>
#sampleData {
height: 200px;
width: 500px;
}
</style>
</body>
</html>