Populate custom scopes list with predefined options

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<ul class="ag-custom-scopes"></ul>

CSS

ul.ag-custom-scopes{
  list-style: none;
  padding: 3px;
  margin: 0px;
  background-color: #fff;
}
ul.ag-custom-scopes>li{
  padding: 8px;
  background-color: #ddd;
  margin-bottom: 2px;
}
ul.ag-custom-scopes>li:last-child{
  margin-bottom: 0px;
}

JavaScript

class CustomFormScopes {

  constructor(parentElement){

    this.parentElement = parentElement;
    this.services;
    this.scopes;

    this.buildScopesList();

    

  }

  loadScopes(callback){

    this.scopes = [
      {
        "id": "1000",
        "name": "My Scope 1"
      },
      {
        "id": "1001",
        "name": "My Scope 2"
      }
    ];

    if(typeof(callback) == 'function'){

      callback();

    }

  }

  buildScopesList(){

    let parent = this.parentElement;

    this.loadScopes(() => {

      console.log(this.scopes);

      for(let i=0;i<this.scopes.length;i++){

        let item = $('<li><input value="' + this.scopes[i].name + '"><span class=\"iconMenuHolder\"></span></li>');

        parent.append(item);

      }

    });

  }

}

let customScopes = new CustomFormScopes($('.ag-custom-scopes'));