Custom metadata schema field

Avatar

Avatar

jayap85207566

Avatar

jayap85207566

jayap85207566

06-04-2017

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!

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

jay_j_s

Avatar

jay_j_s

jay_j_s

10-07-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>

Answers (5)

Answers (5)

Avatar

Avatar

sreekanthk87

Avatar

sreekanthk87

sreekanthk87

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

Avatar

Avatar

sreekanthk87

Avatar

sreekanthk87

sreekanthk87

08-03-2018

HI,

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

Avatar

Avatar

mohanl76933159

Avatar

mohanl76933159

mohanl76933159

24-11-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.

Avatar

Avatar

jayap85207566

Avatar

jayap85207566

jayap85207566

10-04-2017

    Making changes directly to lib has the same issue.  

Avatar

Avatar

MC_Stuff

Avatar

MC_Stuff

MC_Stuff

07-04-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,