cancel
Showing results for 
Search instead for 
Did you mean: 

How to Populate Values on "Select" Control based on another Select Control?

jayachender
Confirmed Champ
Confirmed Champ

Hi All,

I have requirement that to populate values in aikau widget "alfresco/forms/controls/Select" based on selection of another Select Control Value?

AIkau Version 1.0.67

Thanks,

Jaya

4 REPLIES 4

afaust
Legendary Innovator
Legendary Innovator

Let me ask you first: Have you looked to find a solution yourself first or did you immediately ask here? It would be great to know what you have tried so far or what your thought process about a potential way to address this requirement of yours has come up with, so we can actually comment on it, point out potential issues or suggest alternatives.

Perhaps you have already found this blog post by Dave Draper about dynamic form field options. That might provide the understanding that dynamic options are "retrieved" by the select field (or any similar field with an optionsConfig that includes a publishTopic) instead of being "pushed" into it. Perhaps you have already checked the JSDoc for the optionsConfig attribute and seen an example config for triggered an update of the options when another field changes.

ddraper
World-Class Innovator
World-Class Innovator

This video ( Video Link : 1092 ) also shows an example of using the approach shown in the blog post that ‌ has provided a link to

alaksmana
Champ in-the-making
Champ in-the-making

I am using your most basic example with api/people to try add userId parameter into your Site Contributor widget. It does not work. When I fixed the values to existing username, the widget works fine. So it has to be the dynamic load service.  I wonder what's wrong, Below are the codes: 

DASHLET:

model.jsonModel = {

   rootNodeId: args.htmlid,

   pubSubScope: instance.object.id,

   services: [

    "dmsshare/services/KominfoContributorsService",

    "alfresco/services/OptionsService"

   ],

   widgets: [

      {

         name: "alfresco/dashlets/Dashlet",

         config: {

            title: "Kominfo Contributors",

            bodyHeight: args.height || null,

            componentId: instance.object.id,

            widgetsForToolbar: [],

            widgetsForBody: [

            {

            id: "KOMINFOTOTALUPLOADEDFILESUSER_DASHLET",

                name: "dmsshare/widgets/KominfoTotalUploadedFilesUserWidget"

            },

                {

                id: "KOMINFOCONTRIBUTORS_DASHLET",

                    name: "dmsshare/widgets/KominfoContributorsWidget"

                }

            ]//end widgets for dashlet

         }

      }

   ]

};

WIDGET:

define(["dojo/_base/declare",

   "alfresco/core/Core",

   "alfresco/core/I18nUtils",

   "alfresco/enums/urlTypes",

   "alfresco/reports/Report",

   "alfresco/services/_NavigationServiceTopicMixin",

   "dojo/_base/lang",

   "dojo/date",

   "dojo/date/stamp",

   "service/constants/Default"],

      function(declare, AlfCore, I18nUtils, urlTypes, Report, _NavigationServiceTopicMixin, lang, date, stamp, AlfConstants) {

         // Lets default the report to show data from the last month

         var timePeriod = "30D";

         var userId = "admin";

         var startDate = stamp.toISOString(date.add(new Date(), "month", -1), { selector: "date" });

         var endDate = stamp.toISOString(new Date(), { selector: "date" });

         var now = stamp.toISOString(new Date(), { selector: "date" });

         var getStartDate = function() {

            switch (timePeriod)

            {

               case "TODAY":

                  return now;

               case "7D":

                   return stamp.toISOString(date.add(new Date(), "day", -7), { selector: "date" });

               case "30D":

                   return stamp.toISOString(date.add(new Date(), "day", -30), { selector: "date" });

               case "YEAR":

                   return stamp.toISOString(date.add(new Date(), "year", -1), { selector: "date" });

               case "CUSTOM":

                   return startDate;

               default:

                  break;

            }

             return startDate;

         };

         var getEndDate = function() {

            if (timePeriod === "CUSTOM") {

               return endDate;

            } else {

               return now;

            }

         };

         var getUserId = function() {

             return userId;

          };

         var i18nScope = "mapits.KominfoContributorsWidget";

         return declare([Report, _NavigationServiceTopicMixin], {

            /**

             * An array of the i18n files to use with this widget.

             *

             * @instance

             * @type {object[]}

             * @default [{i18nFile: "./i18n/KominfoContributorsWidget.properties"}]

             */

            i18nRequirements: [{i18nFile: "./i18n/KominfoContributorsWidget.properties"}],

            /**

             * An array of the CSS files to use with this widget.

             *

             * @instance cssRequirements {Array}

             * @type {object[]}

             * @default [{cssFile:"./css/KominfoContributorsWidget.css"}]

             */

            cssRequirements: [{cssFile:"./css/KominfoContributorsWidget.css"}],

            /**

             * The CSS class (or a space separated list of classes) to include in the DOM node.

             *

             * @instance

             * @type {string}

             * @default

             */

            baseClass: "mapits-KominfoContributorsWidget",

            /**

             * Makes sure we listen to when a user is clicked in the chart

             *

             * @instance

             */

            postMixInProperties: function widgets_KominfoContributorsWidget__postMixInProperties() {

               this.inherited(arguments);

               this.alfSubscribe("REPORT_ITEM_CLICKED", lang.hitch(this, this.onReportItemClick));

            },

            /**

             * Called when a user is clicked in the chart and will navigate browser to the clicked user's profile.

             *

             * @instance

             * @param value The name of the clicked user

             */

            onReportItemClick: function(value) {

               this.alfPublish(this.navigateToPageTopic, {

                  type: urlTypes.CONTEXT_RELATIVE,

                  url: "/page/repository#filter=category%7C%2FTema" + encodeURIComponent(value) + "&page=1"

               }, true);

            },

            /**

             * The widgets to be processed to generate each item in the rendered view.

             *

             * @instance

             * @type {object[]}

             */

            widgets: [

               {

                  name: "alfresco/layout/VerticalWidgets",

                  config: {

                     additionalCssClasses: "bottom-border",

                     widgets: [

                         {

                            name: "alfresco/forms/Form",

                            config: {

                               displayButtons: false,

                               validFormValuesPublishTopic: "MAPITS_CONTRIB_SHOW_BY_DATE",

                               validFormValuesPublishOnInit: false,

                               widgets: [

                                  {

                                      name: "alfresco/forms/controls/Select",

                                      config: {

                                         fieldId: "TIME_PERIOD",

                                         name: "timePeriod",

                                         value: timePeriod,

                                         label: "",

                                         description: I18nUtils.msg(i18nScope, "timePeriod"),

                                         optionsConfig: {

                                            fixed: [

                                               {

                                                  label: I18nUtils.msg(i18nScope, "timePeriod-today"),

                                                  value: "TODAY"

                                               },

                                               {

                                                  label: I18nUtils.msg(i18nScope, "timePeriod-7d"),

                                                  value: "7D"

                                               },

                                               {

                                                  label: I18nUtils.msg(i18nScope, "timePeriod-30d"),

                                                   value: "30D"

                                               },

                                               {

                                                  label: I18nUtils.msg(i18nScope, "timePeriod-year"),

                                                  value: "YEAR"

                                               },

                                               {

                                                  label: I18nUtils.msg(i18nScope, "timePeriod-custom"),

                                                  value: "CUSTOM"

                                               }

                                            ]

                                         }

                                      }

                                  },

                                  {

                                     name: "alfresco/forms/controls/DateTextBox",

                                     config: {

                                        name: "startDate",

                                        value: startDate,

                                        label: "",

                                        description: I18nUtils.msg(i18nScope, "startDate"),

                                        visibilityConfig: {

                                           initialValue: false,

                                           rules: [

                                              {

                                                 targetId: "TIME_PERIOD",

                                                 is: ["CUSTOM"]

                                              }

                                           ]

                                        }

                                     }

                                  },

                                  {

                                     name: "alfresco/forms/controls/DateTextBox",

                                     config: {

                                        name: "endDate",

                                        value: endDate,

                                        label: "-",

                                        description: I18nUtils.msg(i18nScope, "endDate"),

                                        visibilityConfig: {

                                           initialValue: false,

                                           rules: [

                                              {

                                                 targetId: "TIME_PERIOD",

                                                 is: ["CUSTOM"]

                                              }

                                           ]

                                        }

                                     }

                                  },

                                  {

                                      name: "alfresco/forms/controls/Select",

                                      config: {

                                         fieldId: "USER_ID",

                                         name: "userId",

                                         //value: userId,

                                         label: "Select a User",

                                         description: I18nUtils.msg(i18nScope, "userId"),

                                         optionsConfig: {

                                         //queryAttribute: "label",

                                             //labelAttribute: "label",

                                             //valueAttribute: "value",

                                             publishTopic: "ALF_GET_FORM_CONTROL_OPTIONS",

                                             publishPayload: {

                                             //resultsProperty: "options",

                                                 url: url.context + "/proxy/alfresco/api/people",

                                                 itemsAttribute: "people",

                                                 labelAttribute: "userName",

                                                 valueAttribute: "userName"

                                             }

                                         }

                                      }

                                  }//end select

                               ]

                            }

                         }

                     ]

                  }

               },

               {

              name: "alfresco/layout/HorizontalWidgets",

              config: {

                  additionalCssClasses: "right-border",

                  widgets: [

              {

                  name: "alfresco/charts/ccc/ChartsView",

                  config:

                  {

                    dataRequestTopic: "MAPITS_SITE_CONTENT_REPORT",

                    dataRequestPayload: {

                        site: Alfresco.constants.SITE,

                        startDate: getStartDate(),

                        endDate: getEndDate(),

                        userId: getUserId()

                    },

                    subscriptionTopic: "MAPITS_CONTRIB_SHOW_BY_DATE",

                    widgets: [

                        {

                          name: "alfresco/charts/ccc/BarChart",

                          config: {

                              readers: [

                                { names: "category", indexes: 0 },

                                { names: "value", indexes: 2 }

                              ],

                              orientation: "horizontal",

                              //explodedSliceRadius: null,

                              selectable: false,

                              hoverable:  true,

                              title: "Kominfo Contributors",

                              //extensionPoints: {

                                //slice_innerRadiusEx: "55%",

                                //slice_strokeStyle: "white"

                              //},

                              clickTopic: "REPORT_ITEM_CLICKED",

                              tooltip: {

                                format: function(scene){

                                    var tooltip = "";

                                    tooltip += "<table><tr><td>";

                                    tooltip += "<img class=\"avatar\" src=\"\" + avatarUrl + \"\" alt=\"avatar\"><br>";

                                    tooltip += "</td><td>";

                                    tooltip += "<div style=\"text-align: left;\">";

                                    tooltip += "<strong>" + Alfresco.util.encodeHTML(scene.datum.atoms.category.value) + "</strong><br/>";

                                    tooltip += I18nUtils.msg(i18nScope, "count", Alfresco.util.encodeHTML(scene.datum.atoms.value.value)) + "<br/>";

                                    tooltip += "</div>";

                                    tooltip += "</td></tr></table>";

                                    return tooltip;

                                }

                              }

                          }

                        }

                    ]

                  }

              }//end chart time

              ]

              }

               }

            ]

         });

      });

jayachender
Confirmed Champ
Confirmed Champ

Hi Dave,

I am also doing this way but i am not able to get the result.

Please find attached code.

var studyIDS = {
    name: "alfresco/forms/controls/Select",
    config: {
       fieldId: "STUDY_NAME",
        name: "studyName",
       label: "Study Name",
       title: "Select Destination Study ID(s)",
      optionsConfig: {
         publishTopic: "ALF_GET_FORM_CONTROL_OPTIONS",
         publishPayload: {
            url: url.context + "/proxy/alfresco/slingshot/doclib/treenode/site/"+siteId+"/documentLibrary?perms=false&children=false&max=1000",
            itemsAttribute: "items",
            labelAttribute: "name",
            valueAttribute: "name"
         }
      },
      
    }
};
var groupsList = {
   name: "alfresco/forms/controls/Select",
   config: {
   fieldId: "SITE_GROUPS",
   name: "siteGroups",
   label: "Select group",
optionsConfig: {
     changesTo: [
    { targetId:"STUDY_NAME"},
  ],
   publishTopic: "ALF_GET_FORM_VALUE_DEPENDENT_OPTIONS",
   publishPayload: {
        publishTopic: "ALF_GET_FORM_CONTROL_OPTIONS",
        publishPayloadModifiers :["processCurrentItemTokens","replaceColons"],
        url: url.context + "/proxy/alfresco/api/groups?shortNameFilter="+siteId+"_"+"{value.studyName}",
       itemsAttribute: "data",
       labelAttribute: "displayName",
       valueAttribute: "fullName"
   },
   publishGlobal: false
}
   
}
 
};