Requirements
2sxc Custom Color-Picker Input Field
2sxc 11 makes it very easy to create custom input fields using standard WebComponents. This example shows a color picker using Pickr, a cool JS library.
You can learn how to:
- Use
connector.loadScript(...)
to load a js library - Use
connector.data
to get thevalue
and update it - How to only update the data if you really change it (so users can cancel the dialog without being asked)
- How to save
null
to explicitly not save or reset a value - Use
disconnectedCallback()
to destroy inner objects
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.String Color-Picker Custom Input Field
Output
This example shows a real string-field uses Pickr to provide a color picker.
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 đŸ˜‰.
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 Color-Picker Input Field</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 a color picker using <a href="https://simonwep.github.io/pickr/" target="_blank">Pickr</a>, a cool JS library. </p> <p>You can learn how to:</p> <ul> <li>Use <code>connector.loadScript(...)</code> to load a js library</li> <li>Use <code>connector.data</code> to get the <code>value</code> and update it</li> <li>How to only update the data if you really change it (so users can cancel the dialog without being asked)</li> <li>How to save <code>null</code> to explicitly not save or reset a value</li> <li>Use <code>disconnectedCallback()</code> to destroy inner objects</li> </ul> </div> </div> @Html.Partial("../shared/WarnAnonymousIfFeatureIsOff.cshtml") </hide> <div class="alert alert-success"> <h2>String Color-Picker Custom Input Field</h2> <p> This example shows a real string-field uses Pickr to provide a color picker. <br> Hit this edit button to have a look: </p> @Kit.Toolbar.Empty().New("UiStringColorPickr").AsTag() </div> @Html.Partial("warning.cshtml") @* Footer *@ @Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })