1. Import the **data-edit-shape** attribute but nothing else from Sol-Components
<script src="../component-interop.js"
data-stage="auto"
data-manifest="sol-components.manifest.json pod-os.manifest.json"
data-components="@pod-os/elements"
data-attributes="data-edit-shape"
></script>
2. Add the data-edit-shape and related attribute to a PodOS element; they should point to the RDF subject of the element and to a SHACL shape that describes the RDF.
<![CDATA[<pos-app>
<pos-resource uri="sample-profile.ttl#me"
data-edit-shape="profile.shape.ttl"
data-subject="sample-profile.ttl#me"
data-edit-mode="inPlace"
>
<pos-label></pos-label>
<pos-literals></pos-literals>
</pos-resource>
</pos-app>]]>
3. Listen for PodOS data loading, capture its store
<![CDATA[
<script>
// PodOS needs an absolute IRI; resolve pos-resource's uri against the page.
var posRes = document.querySelector('pos-resource');
var recordUri = new URL(posRes.getAttribute('uri'), document.baseURI).href;
posRes.setAttribute('uri', recordUri);
// Capture PodOS's store from its loaded event.
var podStore = null;
document.addEventListener('pod-os:loaded', function (e) {
podStore = e.detail && e.detail.os && e.detail.os.store && e.detail.os.store.internalStore;
});
]]>
4. Listen for the Sol-Component editor closing, refresh the display.
<![CDATA[
// On modal close: clear the record's stale triples from PodOS's store (its
// fetch merges rather than replaces), then re-fetch once so the edit shows.
document.addEventListener('sol-close', async function () {
if (podStore) {
var rdf = await ComponentInterop.services.whenReady('rdf');
podStore.removeDocument(rdf.sym(recordUri.split('#')[0]));
}
posRes.fetch();
});
</script>]]>