Dynamic selectone in alfresco share

[_jan]

Hi,
I want to make dynamic selectone in alfresco share. Anybody knows how to do that ?
I found that i have to create customSelectone.ftl and there I will write some code which will create this content. Is there some good tutorial for this ?
Thanks

[s_palyukh]

Hi,

You should make custom control for form field where you will call Alfresco webscript.

This webscript should return information that you want to display in <select> section.


FormField control example:

<div class="form-field">

    <script type="text/javascript">//<![CDATA[
    YAHOO.util.Event.onAvailable("${fieldHtmlId}_assign", function(){
        new selectAuthor("${fieldHtmlId}");
    });

    function selectAuthor(currentValueHtmlId) {
        this.currentValueHtmlId = currentValueHtmlId;
        var selectAuthors = Dom.get(this.currentValueHtmlId);

        this.register = function () {
// Call webscript
            Alfresco.util.Ajax.jsonGet({
                url: Alfresco.constants.PROXY_URI + "/custom/users",
                successCallback: {
                    fn: this.updateOptions,
                    scope: this
                },
                failureCallback: {
                    fn: function () {
                    },
                    scope: this
                }
            });
        };

// Add options into <select>
        this.updateOptions = function (res) {
            var result = Alfresco.util.parseJSON(res.serverResponse.responseText);
            if (result.people.length > 0) {
                var people = result.people;
                selectAuthors.options[selectAuthors.options.length] = new Option("", "", true, true);
                for (var i in people) {
                    var option = new Option(people, people);
                    selectAuthors.options[selectAuthors.options.length] = option;
                }
            }
        };

        this.register();
    }
    //]]></script>

    <label for="${fieldHtmlId}">${field.label?html}:<#if field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label>
    <select id="${fieldHtmlId}" name="${field.name}" tabindex="0"
            <#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>
            <#if field.disabled  && !(field.control.params.forceEditable?? && field.control.params.forceEditable == "true")>disabled="true"</#if>>
    </select>
</div>


‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[_jan]

Thanks for reply,
I tried that code with some customization but I am not able to populate that option in dropdown menu. Only what is there, is that test option what I manually insert into code. I have no error but code in updateOptions function is not executing.

My code is:

<div class="form-field">
    <script type="text/javascript">//<![CDATA[
    YAHOO.util.Event.onAvailable("${fieldHtmlId}", function(){
        new selectAjax("${fieldHtmlId}");
    });
    function selectAjax(currentValueHtmlId) {
        this.currentValueHtmlId = currentValueHtmlId;
        var select = Dom.get(this.currentValueHtmlId);
       alert();
        this.register = function () {
            Alfresco.util.Ajax.jsonGet({
                url: "http://localhost:8080/alfresco/service/someco/whitepapers",
                successCallback: {
                    fn: this.updateOptions,
                    scope: this
                },
                failureCallback: {
                    fn: function(){},
                    scope: this
                }
            });
        };
        this.updateOptions = function (res) {
            var result = Alfresco.util.parseJSON(res.serverResponse.responseText);
            if (result.whitepapers > 0) {
                var whitepapers = result.whitepapers;
                select.options[select.options.length] = new Option("", "", true, true);
                for (var i in whitepapers) {
                    var option = new Option(whitepapers.name, whitepapers.title);
                    select.options[select.options.length] = option;
                }
            } else {
               select.options[select.options.length] = new Option("", "", true, true);
               var option = new Option("test1", "test2");
                select.options[select.options.length] = option;
            }
        };
 
        this.register();
    }
    //]]></script>
    <label for="${fieldHtmlId}">${field.label?html}:<#if field.mandatory><span class="mandatory-indicator">${msg("form.required.fields.marker")}</span></#if></label>
    <select id="${fieldHtmlId}" name="${field.name}" tabindex="0"
            <#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>
            <#if field.disabled  && !(field.control.params.forceEditable?? && field.control.params.forceEditable == "true")>disabled="true"</#if>>
            <option>test option</option>
    </select>
</div>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[_jan]

I had there some stupid mistake, there was missing

.length‍

atribute with

if‍

statement.
This should work.
<blockcode>function selectAjax(currentValueHtmlId) {
        this.currentValueHtmlId = currentValueHtmlId;
        var select = Dom.get(this.currentValueHtmlId);
        this.register = function () {
            Alfresco.util.Ajax.jsonGet({
                url: "http://localhost:8080/alfresco/service/someco/whitepapers",
                successCallback: {
                    fn: function(res){
                     var result = Alfresco.util.parseJSON(res.serverResponse.responseText);
                     if (result.whitepapers.length > 0) {
                         var whitepapers = result.whitepapers;
                         var i = 0;
                         for (var i2 in whitepapers) {
                             var option = new Option("option"+i, whitepapers[i2].title);
                             select.options = option;
                             i++;
                         }
                     }
                    },
                    scope: this,
                },
                failureCallback: {
                    fn: function(){},
                    scope: this
                }
            });
        };
        this.register();
    }</blockcode>
Thanks