Set initial value to Sharepoint people picker via javascript

Suppose that in our Sharepoint Online site we want to use Azure groups for configuring permissions on securable objects (sub sites, document libraries, etc.) and that all Azure groups’ names start with common prefix “azure_” which is set as part of naming convention used in the company. In this case users will always need to type this prefix in people picker each time they want to grant permissions to some Azure group. Is it possible to help them and set common prefix as initial value of people picker? Yes, it is possible with using the following trick:

   1: var peoplePickerUtility = {

   2:  

   3:     isPeoplePickerOpened: false,

   4:     isPeoplePickerChanged: false,

   5:  

   6:     addPrefixToPeoplePicker: function() {

   7:         if (window.location.href.toLowerCase().indexOf("/user.aspx") < 0) {

   8:             return;

   9:         }

  10:  

  11:         setTimeout(function(){

  12:             try {

  13:                 if (typeof(SPClientPeoplePicker) != "undefined" &&

  14: $("#" + SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePicker_TopSpan.EditorElementId).is(":visible")) {

  15:                     peoplePickerUtility.isPeoplePickerOpened = true;                    

  16:                 }

  17:                 else {

  18:                     peoplePickerUtility.isPeoplePickerOpened = false;

  19:                     peoplePickerUtility.isPeoplePickerChanged = false;

  20:                 }

  21:                 

  22:                 if (peoplePickerUtility.isPeoplePickerOpened &&

  23:                         !peoplePickerUtility.isPeoplePickerChanged) {

  24: $("#" + SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePicker_TopSpan.EditorElementId).val("azure_");

  25:                     peoplePickerUtility.isPeoplePickerChanged = true;

  26:                 }

  27:                 

  28:                 peoplePickerUtility.addPrefixToPeoplePicker();

  29:             }

  30:             catch(e) {

  31:                 console.log("Error in peoplePickerUtility.addPrefixToPeoplePicker: " + e.message);

  32:             }

  33:         }, 1000);

  34:     }

  35: };

  36:  

  37: $(function() {

  38:     peoplePickerUtility.addPrefixToPeoplePicker();

  39: });

The idea is that we run function the loop each 1 sec (line 11) which checks whether people picker is opened via SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePicker_TopSpan object. If it is visible it sets its initial value (“azure_”) and sets flag which says that it is already changed (line 25), so it won’t change it twice once it is opened and override value added by user. If people picker will be closed and opened again, it will set initial value again. This code works only on granting permissions page (user.aspx) in order to not affect whole site. Of course this is not perfect solution, but it works. After that people picker will have “azure_” text as initial value:

Hope that this information will help someone.