Deploy Components Dynamically
Many situations call for the dynamic deployment of ChemWriter components. For example, a structure grid may be generated in response to an XMLHttpRequest.
To render components dynamically, append the required ChemWriter DOM elements, then call chemwriter.refresh.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Deploy Components Dynamically | ChemWriter</title>
<link rel="stylesheet" href="https://chemwriter.com/sdk/chemwriter.css">
<script src="https://chemwriter.com/sdk/chemwriter.js" data-chemwriter-license="https://chemwriter.com/licenses/396f597e46fbdbd39e34108b010c6efcb2ef2ed2.txt"></script>
<style>
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 8em);
grid-gap: 0.3em;
}
.chemwriter {
border: 2px solid #d0d0d0;
padding: 0.1em;
border-radius: 0.2em;
}
/* Suppress iOS/Webkit bug */
.chemwriter svg {
max-height: 100%;
min-height: 100%;
}
</style>
</head>
<body>
<div class="grid"></div>
</body>
<script>
chemwriter.System.ready(() => {
let grid = document.querySelector('.grid');
for (let i = 12; i > 0; i--) {
let cell = document.createElement('div');
cell.setAttribute('data-chemwriter-ui', 'image');
cell.setAttribute('data-chemwriter-src', 'https://chemwriter.com/data/structure-' + i + '.mol');
grid.appendChild(cell);
}
chemwriter.refresh();
});
</script>
</html>