IBM Business Automation Community Come for answers. Stay for best practices. All we’re missing is you. Join / Log in Ask a question
“htm” is a small library (< 2k) that enables us to write jsx like code using html tagged templates.
This will result in faster code execution than using babel to transpile jsx to JavaScript in the browser. The syntax difference between jsx and the templates used with htm is very minor.
Note that the first line in the code defines the tag for the template. For this blog, let’s just call it “jsx” to make it more distinctive. You can see that the code utilizes the React capability to generate html elements using array map function. Also note how the handler function is passed to the created checkboxes using React syntax “onClick” instead of “onclick”. The checkboxes are controlled because their “checked” value is derived from the state of the component.
const jsx = htm.bind(React.createElement); const view = this; const titleStr = view.getOption("title"); const choiceList = view.getOption("choices").items; const itemList = view.getOption("items").items; var boundData = view.context.binding && view.context.binding.get("value"); function updateOutput(data) { if(boundData) { for(let i = 0; i < data.length; i++) { boundData.items[i] = data[i]; } view.context.binding.set("value", boundData); } } function Checkbox(props) { return jsx`<input type="checkbox" ...${props}/>`; } function CheckListComponent({title, choices, items, initialData, onChange}) { const [data, setData] = React.useState(initialData || new Array(items.length)); function handleChange(event) { const checkboxId = event.target.id.split("_"); const newData = data.slice(); newData[parseInt(checkboxId[0])] = event.target.checked ? checkboxId[1] : null; setData(newData); onChange(newData); } return jsx` <table> <thead> <tr> <th>${title}</th> ${choices.map(choice => jsx` <th key="${choice.value}">${choice.name}</th> `)} </tr> </thead> <tbody> ${items.map((item, k) => jsx` <tr key="${k}"> <td>${item}</td> ${choices.map(choice => jsx` <td key="${k}_${choice.value}"> <${Checkbox} id="${k}_${choice.value}" checked=${false || (data[k] && data[k]===choice.value)} onClick=${handleChange} /> </td> `)} </tr> `)} </tbody> </table> `; } var domNode = document.createElement("div"); view.context.element.appendChild(domNode); ReactDOM.render( jsx` <${CheckListComponent} title=${titleStr} choices=${choiceList} items=${itemList} initialData=${boundData? boundData.items : null} onChange=${updateOutput} /> `, domNode );
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td:first-child, th:first-child { text-align: left; } th { font-weight: bold; } td, th { border: 1px solid #dddddd; text-align: center; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; }