Requirements
2sxc Custom Color-Picker Input Field - Configurable
Input fields may expect some configuration - like default colors or WebApi endpoints. To enable such a configuration, we need a Content-Type which defines all the fields that can be configured. This can be in the app-data, or it can be stored in a subfolder of the field-extension, to make redestribution easier.
This example contains the json-exported content-type in the folder /system/field-string-app-color-pickr-pro/.data/contenttypes/
so you could just copy the extension folder to another app and use it from there.
So in this tutorial you'll learn how to:
- To see how the UI changes based on field configuration
- How to access such pre-configured settings with
connector.field.settings
- The Content-Type for configuration is included in the extension folder
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.Configurable Color-Picker Input Field
Output
This example shows two color-picker fields, with different initial configurations.
Hit this edit button to have a look:
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 - Configurable</h2> <p> Input fields may expect some configuration - like default colors or WebApi endpoints. To enable such a configuration, we need a Content-Type which defines all the fields that can be configured. This can be in the app-data, or it can be stored in a subfolder of the field-extension, to make redestribution easier. <br> This example contains the json-exported content-type in the folder <code>/system/field-string-app-color-pickr-pro/.data/contenttypes/</code> so you could just copy the extension folder to another app and use it from there. </p> <p>So in this tutorial you'll learn how to:</p> <ul> <li>To see how the UI changes based on field configuration</li> <li>How to access such pre-configured settings with <code>connector.field.settings</code></li> <li>The Content-Type for configuration is included in the extension folder</li> </ul> </div> </div> @Html.Partial("../shared/WarnAnonymousIfFeatureIsOff.cshtml") </hide> <div class="alert alert-success"> <h2>Configurable Color-Picker Input Field</h2> <p> This example shows two color-picker fields, with different initial configurations. <br> Hit this edit button to have a look: </p> @Kit.Toolbar.Empty().New("UiStringColorPickrPro").AsTag() </div> @Html.Partial("warning.cshtml") @* Footer *@ @Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })