Error Showing Content - please login as admin for details.
Error Showing Content - please login as admin for details.
#5 Basic HelloWorld Input Field
2sxc Custom Input Fields (11.02+)
2sxc 11 makes it very easy to create custom input fields using standard WebComponents.
This example shows the most basic case - just a dummy message (so not a real input field).
You can use it to learn about things like:
- Naming conventions for where to put the files
- Naming conventions for the
tagName
- Using
customElements.define(...) to register your element
- How web components use
constructor() and making sure you have the super() call there
- Using
connectedCallback() and disconnectedCallback() to init/destroy your component
So just have a look and discover how simple everything can be 🚀.
Important: The feature "Public Use of Edit Form" is disabled
The feature is needed for anonymous users to use the Edit Form. Register your site here https://patrons.2sxc.org/ to get access to the feature.
Basic Hello-World Custom Field
This example shows a dummy-field which doesn't allow editing, but will just show a message.
Hit this edit button to have a look:
Important: We opened permissions that you can experience the edit dialog - so you can save, but it will just create draft data 😉.
#5 Basic HelloWorld Input Field
/*
This examples shows a plain JS WebComponent that will just show some messages
This is just to demonstrate how such a component is built.
*/
// always use an IFFE to ensure you don't put variables in the window scope
(() => {
const tagName = 'field-empty-app-hello-world';
class EmptyHelloWorld extends HTMLElement {
/* Constructor for WebComponents - the first line must always be super() */
constructor() {
super();
console.log('FYI: EmptyHelloWorld just constructed!');
}
/* connectedCallback() is the standard callback when the component has been attached */
connectedCallback() {
this.innerHTML = 'Hello <em>world</em>!';
console.log('FYI: EmptyHelloWorld just got connected!');
}
/** disconnectedCallback() is a standard callback for clean-up */
disconnectedCallback() {
console.log('FYI: EmptyHelloWorld getting disconnected - nothing to clean up');
}
}
// Register this web component - if it hasn't been registered yet
if (!customElements.get(tagName)) customElements.define(tagName, EmptyHelloWorld);
})();