Custom metadata schema field

[jayap85207566]

I have extended the granite UI to create a user picker metadata schema field.  It works fine the first time but when i go back to the metadata schema editor and edit it, the custom user picker changes back to text field.  Not sure why it is happening. Any ideas?

I have followed these steps to create new metadata schema field.

1. In CRXDe Lite, create the following path under /apps/dam:

/apps/dam/gui/coral/components/admin
2. Navigate to /libs/dam/gui/coral/components/admin, and copy the schemaforms folder into the
path created above
3. In open this folder your local apps directly, and navigate to formbuilder. Open the builditems.jsp.

4. At line 66 of the builditems.jsp, added the code snippet to render a new field.

    <li class="field" data-fieldtype="text">
    <div class="formbuilder-template-title">
    <i class="coral-Icon coral-Icon--sizeM coral-Icon--text"></i>
    <span><%= i18n.get("User picker custom") %></span></div>
    <script class="field-properties" type="text/x-handlebars-template">
    <sling:include resource="<%= fieldTemplateResource %>"resourceType="dam/gui/coral/components/admin/schemaforms/formbuilder/formfields/customfield" /></script></li>

5. Navigate back to /apps/dam/gui/coral/components/admin/schemaforms/formbuilder/formfields.
Create a directory called customfield. From the textfield directory (also in this formfields directory),
copy over the textfield.jsp. Rename this coustomfield.jsp.


6. Replace the resourceType calls to refer to a customfield. 

    <sling:include resource="<%= resource %>"resourceType="granite/ui/components/coral/foundation/form/customfield"/>

        <input type="hidden" name="./items/<%= key %>/sling:resourceType" value="granite/ui/components/coral/foundation/form/customfield">

7. create the following path:
/apps/granite/ui/components/coral/foundation/form/

8. Navigate to the equivalent path under libs.  From here, copy the userpicker folder and paste this into the path you created in the
last step, under apps and rename it to customfield. 

Thanks!

[MC_Stuff]

Hi Jay,

AFAIK metadata schema editor use conf folder to see the changes.   Can you make your changes in /libs only rather than /apps & see it works.  If that works then I can guide for next steps of actual fix rather than updating the /libs directly.

Thanks,

[jayap85207566]

    Making changes directly to lib has the same issue.  

[jay_j_s · Accepted solution]

I was having a very similar issue. I was able to solve it by adding unique "granite:data/metaType" value in my "customfield.jsp" in builditems.jsp.

Sudo code:

<input type="hidden" name="./items/<%= key %>/granite:data/metaType" value="customfield">

Also worthy of note, is that  /libs/dam/gui/components/admin/schemaforms/formbuilder/view.jsp hard-codes "field" to whatever the metaType is when redrawing (second time in the metadata schema editor). So, once the metaType is added and it is same name as your customfield resource (.jsp) name, it seems to work as expected. At least that was my experience.

Example:

Overlayed builditems.jsp

               <li class="field" data-fieldtype="text">

                      <div class="formbuilder-template-title"><i class="coral-Icon coral-Icon--sizeM coral-Icon--text"></i><span><%= i18n.get("My Custom Field") %></span></div>

                      <script class="field-properties" type="text/x-handlebars-template">

                        <sling:include resource="<%= fieldTemplateResource %>"

                                       resourceType="dam/gui/coral/components/admin/schemaforms/formbuilder/formfields/textareafield" />

                    </script>

                  </li>

Custom field JSP (mycustomfield.jsp):

<%@include file="/libs/granite/ui/global.jsp" %>

<%@ page session="false" contentType="text/html" pageEncoding="utf-8"

         import="org.apache.sling.api.resource.ValueMap,

      com.adobe.granite.ui.components.Config,

      com.adobe.granite.ui.components.Field" %><%

  ValueMap fieldProperties = resource.adaptTo(ValueMap.class);

  String key = resource.getName();

%>

<div class="formbuilder-content-form">

    <label class="fieldtype"><i class="coral-Icon coral-Icon--sizeXS coral-Icon--text"></i><%= i18n.get("My Custom Field") %></label>

    <sling:include resource="<%= resource %>" resourceType="granite/ui/components/foundation/form/textfield"/>

</div>

<div class="formbuilder-content-properties">

    <input type="hidden" name="./items/<%= key %>">

    <input type="hidden" name="./items/<%= key %>/jcr:primaryType" value="nt:unstructured">

    <input type="hidden" name="./items/<%= key %>/sling:resourceType" value="custom-code/components/admin/mycustomproperty">

    <input type="hidden" name="./items/<%= key %>/granite:data/metaType" value="mycustomfield">

    <%

        String resourcePathBase = "dam/gui/coral/components/admin/schemaforms/formbuilder/formfieldproperties/";

        String[] settingsList = {"labelfields", "metadatamappertextfield", "placeholderfields", "requiredfields", "disableineditmodefields", "showemptyfieldinreadonly", "titlefields"};

        for(String settingComponent : settingsList){

            %>

                <sling:include resource="<%= resource %>" resourceType="<%= resourcePathBase + settingComponent %>"/>

            <%

        }

    %>

    <i class="delete-field coral-Icon coral-Icon--delete coral-Icon--sizeL" href="" data-target-id="<%= key %>" data-target="./items/<%= key %>@Delete"></i>

</div>

[mohanl76933159]

How did you came to know this Extending steps , Did you try creating Custom field like this​ ?

Please provide any pointer / steps to introduce and custom composite multi in my custom meta data schema.

[sreekanthk87]

HI,

Does anyone implemented a multi select functionality into this userpicker component, like we can select multiple users ? Any help is much appreciated.

[sreekanthk87]

Does this solution work. I was creating a custom user picker component and experiencing same behavior. It was switching back to text field when I go back to schema editor. I made the highlighted stuff

Does this solution work ? I was facing the same problem and tried  Updating as below.

builditems.jsp

      <li class="field" data-fieldtype="text">

                    <div class="formbuilder-template-title"><coral-icon icon="text" size="M"></coral-icon><span><%= i18n.get("User Picker Custom") %></span></div>

customfield.jsp

<div class="formbuilder-content-form">

    <label class="fieldtype coral-Form-fieldlabel">

    <coral-icon icon="text" size="XS"></coral-icon><%= i18n.get("User Picker Custom") %>

    </label>

    <sling:include resource="<%= resource %>" resourceType="granite/ui/components/coral/foundation/form/userpicker"/>

</div>

<div class="formbuilder-content-properties">

    <input type="hidden" name="<%= xssAPI.encodeForHTMLAttr("./items/" + key) %>">

    <input type="hidden" name="<%= xssAPI.encodeForHTMLAttr("./items/" + key + "/jcr:primaryType") %>" value="nt:unstructured">

    <input type="hidden" name="<%= xssAPI.encodeForHTMLAttr("./items/" + key + "/sling:resourceType") %>" value="granite/ui/components/coral/foundation/form/userpicker">

    <input type="hidden" name="<%= xssAPI.encodeForHTMLAttr("./items/" + key + "/granite:data/metaType") %>" value="text">