Part of #1666 (CUSTOM custom views — phase 4).
Description
When a container's custom attribute is an HTML template (custom = '<div>…</div>'), the author can place real internal lsFusion components (a grid, a property cell, a nested container) into that markup by referencing them by name. When the custom attribute is a React component (custom = 'OrderApp'), there is no way to do this — a child component placed inside the React container is not rendered by the platform.
Add the same slotting capability for the React case: let a React component place genuine platform-rendered components at chosen spots, by name, so authors can mix custom React layout with native widgets instead of re-implementing them.
DESIGN order {
custom = 'OrderApp'; // the container is rendered by React
lines { /* mark this child so it is rendered natively and placed by React */ }
}
// API name illustrative
function OrderApp({ data }) {
return <main>
<h1>Order {data.o.number}</h1>
<LsfComponent name="lines" /> {/* the real lsFusion grid, placed here */}
<footer>Total: {data.o.total}</footer>
</main>;
}Reason
The HTML-template form of custom can already embed native components; the React form cannot, so a React custom view must re-implement grids, editors and other components it could otherwise reuse. Bringing the React case to parity lets authors keep native components and write custom layout only around them.
Part of #1666 (CUSTOM custom views — phase 4).
Description
When a container's
customattribute is an HTML template (custom = '<div>…</div>'), the author can place real internal lsFusion components (a grid, a property cell, a nested container) into that markup by referencing them by name. When thecustomattribute is a React component (custom = 'OrderApp'), there is no way to do this — a child component placed inside the React container is not rendered by the platform.Add the same slotting capability for the React case: let a React component place genuine platform-rendered components at chosen spots, by name, so authors can mix custom React layout with native widgets instead of re-implementing them.
Reason
The HTML-template form of
customcan already embed native components; the React form cannot, so a React custom view must re-implement grids, editors and other components it could otherwise reuse. Bringing the React case to parity lets authors keep native components and write custom layout only around them.