topic Re: Custom controls - search for objects using HTTP requests in Alfresco Forum

Custom controls - search for objects using HTTP requests

upforsin — Sun, 21 Jul 2019 11:27:16 GMT

Hello,I have database in Microsoft Dynamics which stores buyers objects.Now, in my workflow task form, I would like to create a custom control, which will allow me to pick one buyer from that database. I also need a search field, just like when picking an authority (authority.ftl).How can i create "

Re: Custom controls - search for objects using HTTP requests

krutik_jayswal — Mon, 22 Jul 2019 05:21:58 GMT

You need to design your custom control.For designing custom control someone must have an idea about how freemarker and YUI works.

Freemarker is html rendering and yui is javascript framework.Customizing authority.ftl will be more complex for you.It is possible but complex.I suggest you create your own control from scratch.You can create autocomplete field in alfresco.Which will make ajax call and in a drop down it will display output.

Below link will help you in same.

https://docs.alfresco.com/5.2/concepts/dev-extensions-share-form-controls.html

Re: Custom controls - search for objects using HTTP requests

upforsin — Mon, 22 Jul 2019 09:32:41 GMT

Thank you for the reply and the idea. I will try to implement that.

I can develop Freemarker template, it is not a problem. But how to populate it with data? How can I create a controller which will produce model data?

I only know that in share-config-custom.xml i can provide a path to the control template. But where should I create and assign javascript file which will produce required data?

Regards,

Mike

Re: Custom controls - search for objects using HTTP requests

upforsin — Tue, 23 Jul 2019 08:13:15 GMT

Well, i managed to create such a simple template. But it is not working...

<#assign controlId = fieldHtmlId + "-cntrl">
<#assign testId = fieldHtmlId + "-test">


<div id="${controlId}" class="form-field">
    <label for="${fieldHtmlId}">${msg("form.control.my-options.label")}:<#if field.mandatory><span
                class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label>
    <input id="${fieldHtmlId}" name="${field.name}" list="${testId}"
           <#if field.description??>title="${field.description}"</#if>
            <#if field.control.params.size??>size="${field.control.params.size}"</#if>
            <#if field.control.params.styleClass??>class="${field.control.params.styleClass}"</#if>
            <#if field.control.params.style??>style="${field.control.params.style}"</#if>>
    </input>
    <datalist id="${testId}">
        <option value="MyTest">
        <option value="MyTest2">
        <option value="MyTest3">
        <option value="MyTest4">
        <option value="MyTest5">
    </datalist>
    <@formLib.renderFieldHelp field=field />
</div>

<script type="text/javascript">//<![CDATA[


    var getSelectFieldData = function (fieldId) {
        YAHOO.util.Event.onContentReady(fieldId, function () {
            var selectEl = YAHOO.util.Dom.get(fieldId);
            Alfresco.util.Ajax.jsonGet(
                {
                    url: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/html-elements.json",
                    successCallback:
                        {
                            fn: function loadWebscript_successCallback(response, config) {
                                var dataHolder = document.getElementById('${testId}');
                                var jsonOptions = JSON.parse(response);
                                jsonOptions.forEach(function (item) {
                                    var option = document.createElement('option');
                                    option.value = item;
                                    dataHolder.appendChild(option);
                                });
                            }
                        }
                });
        });
    }

    getSelectFieldData("${fieldHtmlId}");


</script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The input form is generated, MyTest's options are showing up but no data from AJAX Request ;(

Re: Custom controls - search for objects using HTTP requests

upforsin — Tue, 23 Jul 2019 17:29:27 GMT

Is it because of the CORS? I am trying to fetch data from another domain. But if so, how can i change it? (i run it on docker so i can't manually change /conf/web.xml file in Tomcat folder)

Re: Custom controls - search for objects using HTTP requests

upforsin — Wed, 24 Jul 2019 11:28:29 GMT

Wow... it is finally working!

What I did not know was that this .ftl file can be just a casual HTML file.

What my mistake was, is that <script> tag loads faster than a document so i had to call JavaScript code AFTER DOM elements has been loaded.

Strange, because standalone HTML file was working without checking if DOM elements are loaded.

One more question, does anyone know how to debug such a code? Browser debugger is a bit useless because code seems to be somewhat encrypted.