#1 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 🚀.
Basic Hello-World Custom Field
Output
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:
<p>
This example shows a dummy-field which doesn't allow editing, but will just show a message. <br>
Hit this edit button to have a look:
@Kit.Toolbar.Empty().New("UiEmptyHelloWorld").AsTag()
</p>Source Code of ../system/field-empty-app-hello-world/index.js
/*
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);
})();
Important: We opened permissions that you can experience the edit dialog - so you can save, but it will just create draft data 😉.
#1 Basic HelloWorld Input Field
@inherits Custom.Hybrid.Razor14
<!-- unimportant stuff, hidden -->
<div @Sys.PageParts.InfoWrapper()>
@Html.Partial("../shared/DefaultInfoSection.cshtml")
<div @Sys.PageParts.InfoIntro()>
<h2>2sxc Custom Input Fields (11.02+)</h2>
<p>
2sxc 11 makes it very easy to create custom input fields using standard <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank">WebComponents</a>.
This example shows the most basic case - just a dummy message (so not a real input field).
</p>
<p>You can use it to learn about things like:</p>
<ol>
<li>Naming conventions for where to put the files</li>
<li>Naming conventions for the <code>tagName</code></li>
<li>Using <code>customElements.define(...)</code> to register your element</li>
<li>How web components use <code>constructor()</code> and making sure you have the <code>super()</code> call there</li>
<li>Using <code>connectedCallback()</code> and <code>disconnectedCallback()</code> to init/destroy your component</li>
</ol>
<p>
So just have a look and discover how simple everything can be 🚀.
</p>
</div>
</div>
<br>
@Html.Partial("../shared/WarnAnonymousIfFeatureIsOff.cshtml")
</hide>
<h2>Basic Hello-World Custom Field</h2>
<p>
This example shows a dummy-field which doesn't allow editing, but will just show a message. <br>
Hit this edit button to have a look:
@Kit.Toolbar.Empty().New("UiEmptyHelloWorld").AsTag()
</p>
@Html.Partial("warning.cshtml")
@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })