Search This Blog

Sunday, May 30, 2021

SPClientPeoplePicker - model popup

 <div class="modal" id="my_modal">

    <div class="modal-dialog">
        <div class="modal-content">
            <div style="display:none;" class="pull-right">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="my-input">Delegate Approver Name</label>
                    <input type="text" class="form-control" style="display:none" id="username" ng-model="appProperties.DelegateUser.Title" disabled />
                    <div title="peoplePickerDelegateUser" id="peoplePickerDelegateUser"></div>
                </div>
            </div>
            <div class="modal-footer">
                <input id="btnSubmitRequest" class="frmbutton" value="Submit" ng-click="submitSysRequest(1,$event,appForm)" type="button" />
                <button class="btn btn-warning" type="button" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

                <script>
                     //OnValueChangedClientScript- while user assing fire this event
            SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDelegateUser_TopSpan.OnValueChangedClientScript = function (peoplePickerIdselectedUsersInfo) {
                var userData = selectedUsersInfo[0];
                if (userData !== undefined) {
                    $('#userID').val(userData.Key.split('\\')[1]);
                    $scope.appProperties.SystemAccess.RequestedFor.LoginName = userData.Key.split('\\')[1];
                    // Get the first user's ID by using the login name.
                    getUserId(userData.Key).done(function (user) {
                        $scope.appProperties.SystemAccess.RequestedFor.Id = user.d.Id;
                    });
                }
            };
              // Get the user ID.
        function getUserId(userName) {
            var call = $.ajax({
                url: siteAbsoluteUrl + "/_api/web/siteusers(@v)?@v='" + encodeURIComponent(userName) + "'",
                method: "GET",
                async: false,
                headers: { "Accept": "application/json; odata=verbose" },
            });
            return call;
        }
                </script>