Multi select option for variable in idea portal which is html widget.

sree42
Tera Contributor

‎07-09-2024 07:11 AM

Hi Team,
I have one requirement to add one variable which is multi select in idea portal. 

sree42_0-1720534088693.png

Like this. I tried with angular js, html etc. But not able to do this with options. I need to add options as well.

Options like: 

abc

xyz

def

 

Please anyone suggest

0 Helpfuls
  • 353 Views
1 REPLY 1

Ratnakar7
Mega Sage
Mega Sage

‎07-09-2024 11:26 PM

Hi @sree42 ,
In the HTML template section of your widget, you can define the multi-select field using AngularJS and HTML. Here’s an example of how to do it:

<div>
  <label for="categorySelect">Category</label>
  <ui-select multiple ng-model="data.selectedCategories" theme="select2" title="Choose a category">
    <ui-select-match placeholder="Select 1 to 5 categories">{{$item.name}}</ui-select-match>
    <ui-select-choices repeat="option in data.options | filter: $select.search">
      <div ng-bind-html="option.name | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
</div>

In the client script section of your widget, initialize the options and bind the selected values to a model. Here’s an example client script:

(function() {
  // Initialize the options
  $scope.data.options = [
    { id: 1, name: 'abc' },
    { id: 2, name: 'xyz' },
    { id: 3, name: 'def' }
  ];
  
  // Initialize the selected categories model
  $scope.data.selectedCategories = [];
})();

 

Thanks,

Ratnakar

0 Helpfuls