#1 Basic HelloWorld Input Field
Requirements
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 thesuper()
call there - Using
connectedCallback()
anddisconnectedCallback()
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
If you want this demo to run for anonymous users you would need it. Register your site on patrons.2sxc.org to get access to the feature.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:
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
Source Code of this file
Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code
@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 })