Creating a custom Footprint field with a custom input control
If none of the standard controls offered out of the box are suitable for your Footprint, you may choose to implement a custom input control. Use the GUI extension mechanism of SDL Tridion Sites to define, configure and implement your custom input control. Then configure one or more custom Footprint fields that use the control.
Procedure
- Implement your custom input control as a JavaScript class that inherits from the class Tridion.Web.UI.Editors.SiteEdit.Controls.FootprintControl. Write an ASCX control to go with it.
- If you want, implement the following additional functionality for Footprint fields that use this control:
- Validation
-
The base class contains a
checkValidationmethod that applies basic validation and returns a Boolean value indicating that the input was valid (true) or invalid (false). If the return value is false, you can find more information about the nature of the invalidity in the propertythis.properties.validationResult. ThecheckValidationmethod in the base class implements the following validation functionality:- If the configuration for the control has an
isMandatoryelement set totrue, an empty value results in the return valuefalse. - If the configuration for the control has a
regExpelement that contains a regular expression, any value that does not match the regular expression results in the return valuefalse.
You can implement
checkValidationin your own class to add your own validation business logic to this functionality, or replace it altogether. In that case, you can also set the value ofthis.properties.validationResultto your own custom invalidity message. - If the configuration for the control has an
- Getting and setting values
-
Implement the
setDisplayValueto implement how a value is visualized in your control, andgetDisplayValueto implement the retrieval of a value from your control. - Enabling and disabling the control
-
Implement the
enableEditinganddisableEditingto implement what should happen if the user selects or clears, respectively, the option to overwrite the existing value for the Footprint. - Event handling
-
Implement the
addEventHandlersandremoveEventHandlersmethods to hook into DHTML events that are triggered when the user is changing a Footprint using the control.
- Read the documentation about building a GUI extension, noting the following differences:
- When you configure your extension, set the
targetattribute of yourext:editorextensionelement to the valueSiteEdit, and not toCME. - Inside the
ext:editorextensionsection, create a subelement called<ext:deckpages>. The various Footprints are implemented as the pages of a 'deck', a list of screens of which only one is showing at any one time.
- When you configure your extension, set the
- Create the following
<ext:deckpages>section:<ext:deckpages> <ext:add> <ext:extension assignid="myFootprint" name="myFootprint"> <ext:control>~/Controls/Footprints/MyFootprint.ascx</ext:control> <ext:pagetype>CustomFootprint</ext:pagetype> <ext:apply> <ext:view name="FootprintSettings"> <ext:control id="FootprintEditors" /> </ext:view> </ext:apply> </ext:extension> </ext:add> </ext:deckpages>In this fragment, MyFootprint.ascx is the ASCX control you built.
You have now created a custom input control. Your next step is to configure one or more custom Footprint fields that use the control. You do this in the configuration file. - On your Content Manager server, access
%TRIDION_HOME%. - Navigate to the subfolder web\WebUI\Models\SiteEdit\Configuration\.
- As a precaution, back up the file SiteEditModel.config.
- Open the file SiteEditModel.config in a plain-text or XML editor.
- Find the
customconfigurationsection. This section has a subsection calledclientconfiguration, which in turn contains afootprintssubsection.You see the list offootprintelements that represent the Footprints which are currently displayed in the Footprint Set dialogs. - Insert a new
footprintelement for the custom Footprint field you want to configure, and give it the following attributes:ID- a unique string that identifies this Footprint
ClaimUri-
the URI of a Claim associated with this Footprint, for example:
taf:claim:foo
- Insert a
<title>section inside your newfootprintelement. - For each language that your installation of SDL Tridion Sites supports, insert a
valueelement inside thetitleelement, and give it alangattribute set to the four-digit Microsoft locale ID belonging to that language:1031for German1033for US English1036for French1041for Japanese1043for Dutch3082for Spanish
- Set the contents of each
valueelement to the localized name of this Footprint, as you want it to appear in the Footprint Settings dialog. - Also insert a
valueelement without alangattribute. This is used as a fallback if the language is none of the above. (If you do not insert such avalueelement, the value of theIDattribute of the parentfootprintelement is displayed.)You have now configured a title for your Footprint. - If you want, you can also write a description for your Footprint. The description appears under the title in the content area on the right if the user selects this Footprint. To create a Footprint description, insert a
<description>section inside your newfootprintelement, directly under the<title>section. - For each language that your installation of SDL Tridion Sites supports, insert a
valueelement inside thedescriptionelement, and give it alangattribute set to the four-digit Microsoft locale ID belonging to that language. - Set the contents of each
valueelement to the localized description of this Footprint, as you want it to appear in the Footprint Settings dialog. - Also insert a
valueelement without alangattribute. This is used as a fallback if the language is none of the above. (If you do not insert such avalueelement, an empty string is displayed.)You have now configured a description for your Footprint. - If you want to disallow empty values for this field, insert a
<settings>section inside your newfootprintelement, and inside it, insert an<isMandatory>element containing the valuetrue. - If the input values for this field need to match a regular expression, specify that regular expression for the field in the form of a
regExpelement inside the<settings>section (create this section if you have not done so yet). Set the value ofregExpto the regular expression that the input value should match. For example, to match only uppercase and lowercase letters, setregExpto^[A-Za-z]+$. - If you implemented the control to recognize and handle a default value, specify a default value for the Footprint.
To specify a default value, insert a
<values>section inside thefootprintelement. Inside<values>, create avalueelement with the following attributes:text-
The value of the field, as it will be submitted. Set this attribute to the empty string (
text="") to make the empty value default. default-
Set this attribute to
true.
- For each language that your installation of SDL Tridion Sites supports, insert a
labelelement inside thevalueelement, and give it alangattribute set to the four-digit Microsoft locale ID belonging to that language. - Set the contents of the
labelelement to the localized text that you want to use to represent the value. For example, if the value refers to the African continent, and thelabelhas alangattribute set to "1036" (France), then the contents oflabelwould beAfrique. - Also insert a
labelelement without alangattribute. This is used as a fallback if the language is none of the above. (If you do not insert such alabelelement, the value of thetextattribute of the parentvalueelement is displayed.)You have now configured a default value for your control. - If the input value for this field needs to be one of a closed to a set values, add a
valueelement for each of the allowed values, specifying atextattribute and a set oflabelsubelements, as you did for the default value. (For these new elements, omit thedefaultattribute.) - If you want, repeat steps 9-24 to configure further custom Footprint fields that use the same input control.
- Save and close SiteEditModel.config.
- Navigate to the subfolder web\WebUI\Editors\SiteEdit\Configuration\.
- As a precaution, back up the file SiteEditEditor.config.
- Open SiteEditEditor.config.
- Find the
customconfigurationsection. This section has a subsection calledclientconfiguration, which in turn contains afootprintssubsection.You see the list offootprintelements that represent the Footprints which are currently displayed in the Footprint Set dialogs. - Create an icon for the custom Footprint in the form of a set of PNG files named footprint.<iconname>.16x16.png (16 by 16 pixels), footprint.<iconname>.24x24.png (24 by 24 pixels), footprint.<iconname>.32x32.png (32 by 32 pixels) and footprint.<iconname>.48x48.png (48 by 48 pixes), where <iconname> is a name for your icon. Save these files in the folder %TRIDION_HOME%\web\WebUI\Editors\SiteEdit\Themes\Carbon\Images\Icons\.
- Add a new
footprintelement with the following attributes:ID- The identifier of the Footprint, as set in SiteEditModel.config.
ControlID- The ID of the custom control, as set in your Editor extension.
Icon- The name you provided for the icon (<iconname>).
- Repeat this step for each new Footprint you configured in SiteEditModel.config.
- Save and close SiteEditEditor.config.
- In the cd_ambient_conf.xml Ambient Data Framework configuration file, add a new
Claimelement in theGloballyAcceptedClaimssection and set itsUriattribute to the Claim URI of your new Claim.