Custom metadata schema field | Community
Skip to main content
J
jayap85207566
Level 2
April 6, 2017
Solved

Custom metadata schema field

  • April 6, 2017
  • 6 replies
  • 7095 views

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!

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by jstadler

    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>

    6 replies

    MC_Stuff
    MC_Stuff
    Level 10
    April 8, 2017

    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,

    J
    jayap85207566Author
    Level 2
    April 10, 2017

        Making changes directly to lib has the same issue.  

    J
    jstadlerAccepted solution
    July 10, 2017

    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>

    M
    mohanl76933159
    November 24, 2017

    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.

    S
    sreekanthk87
    Level 2
    March 9, 2018

    HI,

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

    S
    sreekanthk87
    Level 2
    March 9, 2018

    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">

    Terms & ConditionsAccessibility statement

    Loading footer...