Assign a value to the Angular directive for the SharePoint People Picker

In my create form, I have successfully used a directive to capture and store values in SharePoint via REST. The directive I am using can be found at this link.

Within my HTML, I am implementing the directive like this:

<sp-people-picker name="CC" id="CC" ng-model="vm.cc" min-entries="1" max-entries="20" allow-duplicates="false" show-login="false" show-title="true" min-characters="2" app-web-url="$scope.spAppWebUrl" />

Now, I am facing an issue where I need the selected values from the create form to display in my update form. I have tried setting the scope as shown below, but it seems that the directive does not resolve the values unless they are manually typed into the form:

$scope.vm.cc = {
            Email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfa2b6aaa2aea6a38faaa2aea6a3e1aca0a2">[email protected]</a>",
            Login: "i:0#.f|membership|<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ce1f5e9e1ede5e0cce1edeffee3ffe3eaf8a2e3feeb">[email protected]</a>",
            Name: "Lastname, firstname"
        }

Does anyone have any suggestions on how I can populate the values in my update form automatically on load? It seems like it may require some resolution of the stored values during the loading process.

Answer №1

After following the directive from my initial post, I successfully managed to update the field values by using this method:

peoplePicker.RecipientSelected("i:0#.f|membership|<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="630e1a0d020e0623060e020a0f4d0c1104">[email protected]</a>", "Smith, Bob M", "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bddfced0d4c9d5fdd8d0dcd4d193d2cfda">[email protected]</a>");

If needed, you can also eliminate selected users within the field by executing this command:

peoplePicker.DeleteProcessedUser('i:0#.f|membership|<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3327303f333b1e3b333f373270312c39">[email protected]</a>');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jQuery's AJAX functionality may not always register a successful response

Below is the code snippet I am currently working with: $(".likeBack").on("click", function(){ var user = $(this).attr("user"); var theLikeBack = $(this).closest(".name-area").find(".theLikeBack"); $.a ...

Is it better to define a function within useEffect or externally?

What is the reason behind defining the fetchData function inside the useEffect instead of outside? Link: https://github.com/zeit/next.js/blob/canary/examples/with-graphql-faunadb/lib/useFetch.js import { useState, useEffect } from 'react' exp ...

Issue with uploading files on Android devices in Laravel and Vue JS

My Laravel/Vue JS web app allows users to upload files and photos. Everything runs smoothly except when accessed on Android devices, where the axios call seems to get stuck indefinitely. Below is the code snippet causing the issue: Vue JS component <t ...

What is the best way to incorporate Form Projection into Angular?

I have been attempting to incorporate form projection in Angular, inspired by Kara Erickson's presentation at Angular Connect in 2017, but I am encountering difficulties and errors along the way. view talk here The code provided in the slides is inco ...

Using the div id within JavaScript to create a new Google Maps latitude and longitude

Here is my code for locating an IP using Google Maps. I am trying to set new google.maps.LatLng('< HERE >') to <div id="loc"></div>. How can I achieve this where the result will be 40.4652,-74.2307 as part of #loc? <scrip ...

Update the content that corresponds to the regular expression in jQuery

I am on a quest to locate specific content that matches a regular expression across an entire webpage and then replace it with different text. Below is the code I have been utilizing for this task. var reg = /exam+ple/; $("body").html(function () { ...

I am curious as to why jQuery offers the done() method for promises, while the JavaScript promises documented by Mozilla do not. Is there a way to incorporate a done() method in vanilla JavaScript promises if needed?

What sets apart the Promises in Mozilla's JavaScript documentation (view API page) from those in jQuery's Promises (see API page)? It appears that Mozilla's promise only includes 2 methods: then and catch. On the other hand, jQuery's p ...

Limit Range of jQuery UI Slider Button

How can I modify the jQuery UI slider range to keep the button within the slider div and prevent it from overlapping as shown in the screenshots below? https://i.sstatic.net/odG3o.png https://i.sstatic.net/aiGxr.png ...

Brick-themed HTML/CSS elements drift away from each other

I'm currently designing an image collage for my website and attempted to use masonry for the layout. However, when I adjust the size of the blocks, they seem to drift apart, creating large gaps between each block. Any suggestions on how to resolve thi ...

Searching for and replacing anchor tag links within a td element can be achieved using PHP

I am currently customizing my WordPress website and I need to update the URL (product link) of the "product-image" on the "cart" page. I have the following dynamic code: <td class="product-name" data-title="Product"> <a href=&q ...

Is it possible for multiple queries executed within a websql transaction to be run concurrently?

An informative tutorial online demonstrates the following transaction: db.transaction(function (tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)'); tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")&ap ...

What could be the reason for the malfunction of $http.get method?

Having trouble accessing a JSON file and using alert to debug the issue, but it doesn't seem to be working. Any insights on why this might be happening would be greatly appreciated. Thanks! app.controller("MainController", function($scope, $http) { ...

What are the mechanics behind the functionality of ES6 class instance variables?

I'm encountering an issue with the following code that is not behaving as expected: import React, { Component } from 'react'; let result = null; class MyData extends Component { _getData = () => { fetch(url) .then(response = ...

Is it possible to encounter the issue of "Context Lost" and "Importing multiple instances" in Three.js?

I am in the process of developing a 3D editor that allows users to manipulate a 3D scene and then view the result by pressing a "play" button. In order to display the output, I am utilizing an iframe. Below is the snippet of my HTML code: <iframe id=&qu ...

A guide on utilizing ClassName to insert new items into a DIV

Original HTML code: <span class="specLink"> <specialty><a title="Plastic Surgery" href="link2.aspx">Plastic Surgery</a></specialty> </span> <br /> <span class="specLink"> <specialty2><a titl ...

Establish a connection to AWS by utilizing MQTT.js

Looking to create a web page that connects to an AWS server? While python-Paho-mqtt allows for the use of tls_set to add security certificates and more, how can we achieve the same with MQTT.js? And if unable to do so, what are the steps to run python-PAHO ...

When attempting to access a PDF file via URL, binary information is visible on the browser instead

I'm currently developing a Java application and facing an issue with opening PDF files in a web page using both IE and Chrome. After extensive research and attempts using the JSoup API, here is the complete process from HTML to Java controller to disp ...

Having trouble loading environment variables in NextJS on Heroku?

I am currently utilizing NextJS and deploying my application on Heroku. When the page initially loads, I am able to retrieve data through getInitialProps without any issues. However, when trying to access this data in a regular function, I encounter an er ...

Utilize state parameters within a service in UI-router

Currently, I am working on setting up this state configuration: .state('admin.category',{ url: '/category', templateUrl:'views/admin.category.html', resolve:{ category: ['CategoryLoader', functio ...

Vue 3 feature: Click the button to dynamically insert a new row into the grid

Just starting out in the world of coding, I've zero experience with Vue - it's my introduction to frameworks and arrays are currently my nemesis. In a recent exercise, I managed to display the first five elements of an array in a table after filt ...