Cet article a fait l’objet d’une traduction automatique. Pour afficher l’article en anglais, activez la case d’option Anglais. Vous pouvez également afficher le texte anglais dans une fenêtre contextuelle en faisant glisser le pointeur de la souris sur le texte traduit.
Traduction
Anglais

Créer des contrôles de l'expérience utilisateur à l'aide de SharePoint hébergée par le fournisseur des compléments

Créer des contrôles de l'expérience utilisateur dans SharePoint hébergé par le fournisseur des compléments qui fonctionnent et se comportent comme des contrôles de l'expérience utilisateur sur le site web hôte.

Dernière modification :mercredi 12 août 2015

S’applique à :Office 365 | SharePoint 2013 | SharePoint Online

Note Remarque

Le nom « Applications pour SharePoint » est remplacé par « Compléments SharePoint ». Lors de la période de transition, il se peut que la documentation et l’interface utilisateur de certains produits SharePoint et outils Visual Studio utilisent toujours le terme « applications pour SharePoint ». Pour plus d’informations, voir Nouveau nom des applications pour Office et SharePoint.

L'article décrit les trois exemples qui montrent comment implémenter des contrôles de l'expérience utilisateur dans votre complément hébergé par le fournisseur :

  • Core.PeoplePicker – vous montre comment ajouter un contrôle de sélecteur de personnes.

  • Core.TaxonomyMenu – vous montre comment implémenter un contrôle de menu taxonomie localisable.

  • Core.TaxonomyPicker – vous montre comment implémenter un contrôle de sélecteur de taxonomie.

Ces exemples utilisent JavaScript et le JSOM pour communiquer avec SharePoint et utiliser la bibliothèque inter-domaines pour gérer les appels de fonction à partir de la macro complémentaire pour le domaine du site hôte.

L'exemple de Core.PeoplePicker vous montre comment implémenter un contrôle de sélecteur de personnes dans un complément hébergé par le fournisseur. Lorsque l'utilisateur commence à taper un nom dans la zone d'entrée de texte, les recherches de contrôle du profil utilisateur stockent les correspondances potentielles, et les affiche dans l'interface utilisateur. Le complément affiche un contrôle de sélecteur de personnes configurable et extensible qui s'exécute sur un hôte distant et interroge le magasin de profils utilisateur sur le site hôte pour faire correspondre des entrées de l'utilisateur.

La figure 1. Contrôle de sélecteur de personnes

Contrôle Sélecteur de personnes
Remarque Remarque

La solution de Visual Studio 2013 de l'exemple contient un module nommé « Factice » pour s'assurer que, lorsque le complément est déployé, il crée un site web de compléments. Un complément de site web est requis pour les appels inter-domaines.

Le dossier Scripts du projet Core.PeoplePickerWeb contient des fichiers app.js et peoplepickercontrol.js (ainsi que les fichiers de ressources personnes sélecteur pour la prise en charge linguistique supplémentaire). Le fichier app.js extrait le contexte client à l'aide de la bibliothèque inter-domaines et raccorde le code HTML dans le fichier Default.aspx dans le contrôle de sélecteur de personnes. Le fichier Default.aspx contient les balises <div> qui implémentent la zone de texte et la fonctionnalité de recherche de personnes.

Remarque Remarque

Le code dans cet article est fourni tel quel, sans garantie d’aucune sorte, expresse ou implicite, y compris mais sans s’y limiter, aucune garantie implicite d’adéquation à un usage particulier, à une qualité marchande ou une absence de contrefaçon.

<div id="divAdministrators" class="cam-peoplepicker-userlookup ms-fullWidth">
  <span id="spanAdministrators"></span>
<asp:TextBox ID="inputAdministrators" runat="server" CssClass="cam-peoplepicker-edit" Width="70"></asp:TextBox>
</div>
<div id="divAdministratorsSearch" class="cam-peoplepicker-usersearch ms-emphasisBorder"></div>
<asp:HiddenField ID="hdnAdministrators" runat="server" />

Le fichier app.js crée et configure un contrôle de sélecteur de personnes.

//Make a people picker control.
//1. context = SharePoint Client Context object
//2. $('#spanAdministrators') = SPAN that will 'host' the people picker control
//3. $('#inputAdministrators') = INPUT that will be used to capture user input
//4. $('#divAdministratorsSearch') = DIV that will show the 'drop-down' of the picker
//5. $('#hdnAdministrators') = INPUT hidden control that will host a resolved users
peoplePicker = new CAMControl.PeoplePicker(context, $('#spanAdministrators'), $('#inputAdministrators'), $('#divAdministratorsSearch'), $('#hdnAdministrators'));
// required to pass the variable name here!
peoplePicker.InstanceName = "peoplePicker";
// Hookup everything.
peoplePicker.Initialize();

Le contrôle de sélecteur de personnes interroge l'objet ClientPeoplePickerWebServiceInterface dans la bibliothèque JSOM pour lancer des recherches pour les utilisateurs dont les noms correspondent à des chaînes de caractères entrés.


if (searchText.length >= parent.GetMinimalCharactersBeforeSearching()) {
                            resultDisplay = 'Searching...';
                            if (typeof resultsSearching != 'undefined') {
                                resultDisplay = resultsSearching;
                            }

                  var searchbusy = parent.Format('<div class=\'ms-emphasisBorder\' style=\'width: 400px; padding: 4px; border-left: none; border-bottom: none; border-right: none; cursor: default;\'>{0}</div>', resultDisplay);
                            parent.PeoplePickerDisplay.html(searchbusy);
                            // Display the suggestion box.
                            parent.ShowSelectionBox();

                   var query = new SP.UI.ApplicationPages.ClientPeoplePickerQueryParameters();
                            query.set_allowMultipleEntities(false);
                            query.set_maximumEntitySuggestions(2000);
                            query.set_principalType(parent.GetPrincipalType());
                            query.set_principalSource(15);
                            query.set_queryString(searchText);
                            var searchResult = SP.UI.ApplicationPages.ClientPeoplePickerWebServiceInterface.clientPeoplePickerSearchUser(parent.SharePointContext, query);

                  // Update the global queryID variable so that you can correlate incoming delegate calls.
                            parent._queryID = parent._queryID + 1;
                            var queryIDToPass = parent._queryID;
                            parent._lastQueryID = queryIDToPass;

                  // Make the SharePoint request.
                            parent.SharePointContext.executeQueryAsync(Function.createDelegate(this, function () { parent.QuerySuccess(queryIDToPass, searchResult); }),
                                                Function.createDelegate(this, function () { parent.QueryFailure(queryIDToPass); }));

L'exemple de Core.TaxonomyMenu vous montre comment implémenter un contrôle de menu de taxonomie localisable est renseigné à partir du magasin de termes dans un complément hébergé par le fournisseur. Le complément également définit les langues du magasin de termes requis, les groupes, ensembles et les termes du contrat de renseigner le menu et vérifie les préférences de langue de l'utilisateur pour définir la langue d'affichage.

Le complément implémente une classe TaxonomyHelper (CSOM) qui définit le magasin de termes et l'alimente avec les termes du contrat. Il télécharge ensuite dans le dossier du site racine un fichier JavaScript qui affiche les liens de navigation.

Le complément organise le magasin de termes sur le site hôte. Il utilise les méthodes et les objets de modèle pour créer un groupe de termes et un ensemble, puis remplit le terme défini avec quatre termes.

La figure 2. Écran de configuration du magasin de termes

Écran de configuration du magasin de termes

Lorsque vous cliquez sur le bouton de magasin de termes d'installation, le complément :

  • Permet de s'assurer que les langues requises (anglais, allemand, français et suédois) sont activés dans le magasin de termes.

  • Crée un groupe de termes et ensemble de termes et remplit le terme défini avec quatre nouveaux termes.

Le code suivant dans la classe TaxonomyHelper vérifie que les langues requises sont activées, et si elles ne sont pas, elles leur permettent.


var languages = new int[] { 1031, 1033, 1036, 1053 };
            Array.ForEach(languages, l => { 
                if (!termStore.Languages.Contains(l)) 
                    termStore.AddLanguage(l); 
            });

            termStore.CommitAll();
            clientContext.ExecuteQuery();

// Create the term group.
termGroup = termStore.CreateGroup("Taxonomy Navigation", groupId);
                clientContext.Load(termGroup);
                clientContext.ExecuteQuery();

Enfin, le code suivant dans la même classe TaxonomyHelper crée chaque nouveau terme, ainsi que les étiquettes pour les langues suédois, allemands et français. Il définit également une valeur pour la propriété _Sys_Nav_SimpleLinkUrl , qui est équivalente à la propriété Simple Link or Header dans l'outil de gestion du magasin de termes. Dans ce cas, l'URL pour chaque terme pointe vers le site racine.


var term = termSet.CreateTerm(termName, 1033, Guid.NewGuid());
term.CreateLabel(termNameGerman, 1031, false);
term.CreateLabel(termNameFrench, 1036, false);
term.CreateLabel(termNameSwedish, 1053, false);
term.SetLocalCustomProperty("_Sys_Nav_SimpleLinkUrl", clientContext.Web.ServerRelativeUrl);

Ensuite, le complément insère le fichier topnav.js dans le dossier racine du site hôte. Ce fichier contient le JavaScript qui insère les liens de cet ensemble dans le volet de navigation de la page d'accueil du site hôte de termes. L'interface utilisateur de compléments vous montre également comment les liens de navigation apparaîtra sur le site hôte après que la macro complémentaire télécharge le fichier JavaScript.

Le code suivant dans le fichier topnav.js utilise JSOM pour vérifier pour la langue préférée de l'utilisateur.


var targetUser = "i:0#.f|membership|" + _spPageContextInfo.userLoginName;
        context = new SP.ClientContext.get_current();
var peopleManager = new SP.UserProfiles.PeopleManager(context);
var userProperty = peopleManager.getUserProfilePropertyFor(targetUser, "SPS-MUILanguages");

Le complément, puis détermine si les préférences de langue de l'utilisateur correspond à une des langues activées. Si elle trouve une correspondance, le code suivant obtient les termes et les étiquettes associées pour la langue préférée de l'utilisateur.


while (termEnumerator.moveNext()) {
    var currentTerm = termEnumerator.get_current();
    var label = currentTerm.getDefaultLabel(lcid);

    termItems.push(currentTerm);
    termLabels.push(label);
    context.load(currentTerm);

Enfin, le code suivant dans le fichier topnav.js insère des liens qui contiennent les termes dans l'élément de navigation supérieure du site hôte.


html += "<ul style='margin-top: 0px; margin-bottom: 0px;'>"
        for (var i in termItems) {
            var term = termItems[i];
            var termLabel = termLabels[i];
            var linkName = termLabel.get_value() != 0 ? termLabel.get_value() : term.get_name();
            var linkUrl = term.get_localCustomProperties()['_Sys_Nav_SimpleLinkUrl'];

            html += "<li style='display: inline;list-style-type: none; padding-right: 20px;'><a href='" + linkUrl + "'>" + linkName + "</a></li>";
        }
        html += "</ul>";

        $('#DeltaTopNavigation').html(html);
        SP.UI.Notify.removeNotification(nid);

L'exemple de Core.TaxonomyPicker vous montre comment implémenter un contrôle de sélecteur de taxonomie dans un complément hébergé par le fournisseur. Lorsque l'utilisateur commence à taper un terme dans la zone d'entrée de texte, les recherches de contrôle du magasin de termes pour le potentiel correspond aux et les affiche dans une liste sous la zone d'entrée.

Le complément crée une page HTML qui est conforme aux exigences de sélecteur de taxonomie JSOM, puis ajoute et configure le contrôle. Il utilise la bibliothèque JSOM pour interroger le magasin de termes du site hôte. Le sélecteur de taxonomie communique avec le Service de métadonnées gérées, ce qui nécessite une autorisation d'écriture dans l'étendue d'autorisation de taxonomie afin qu'elle puisse lire à partir d'ensembles de termes fermé et écrire des ensembles de termes ouverts SharePoint. Assurez-vous que le fichier AppManifest.xml a défini l'autorisation d'écriture dans l'étendue appropriée.

Le dossier Scripts du projet Core.TaxonomyPicker contient des fichiers app.js et taxonomypickercontrol.js (ainsi qu'un fichier de ressources du sélecteur de taxonomie pour la prise en charge linguistique supplémentaire). Le fichier app.js extrait le contexte client à l'aide de la bibliothèque inter-domaines et raccorde le code HTML dans le fichier Default.aspx dans le contrôle de sélecteur de taxonomie. Le fichier Default.aspx contient le champ masqué qui implémente la zone de texte et la capacité de sélecteur de taxonomie. Elle ajoute également une liste à puces pour afficher les suggestions renvoyées à partir du magasin de termes.


<div style="left: 50%; width: 600px; margin-left: -300px; position: absolute;">
            <table>
                <tr>
                    <td class="ms-formlabel" valign="top"><h3 class="ms-standardheader">Keywords Termset:</h3></td>
                    <td class="ms-formbody" valign="top">
                        <div class="ms-core-form-line" style="margin-bottom: 0px;">
                            <asp:HiddenField runat="server" id="taxPickerKeywords" />
                        </div>
                    </td>
                </tr>
            </table>

            <asp:Button runat="server" OnClick="SubmitButton_Click" Text="Submit" />

            <asp:BulletedList runat="server" ID="SelectedValues" DataTextField="Label" />
</div>

Le fichier app.js crée et configure un contrôle de sélecteur de taxonomie.

// Load scripts for calling taxonomy APIs.
                    $.getScript(layoutsRoot + 'init.js',
                        function () {
                            $.getScript(layoutsRoot + 'sp.taxonomy.js',
                                function () {
                                    // Bind the taxonomy picker to the default keywords term set.
                                    $('#taxPickerKeywords').taxpicker({ isMulti: true, allowFillIn: true, useKeywords: true }, context);
                                });
                        });

Le contrôle de sélecteur de taxonomie utilise le code suivant pour ouvrir une instance de TaxonomySession dans le JSOM pour charger tous les termes à partir du magasin de termes.

// Get the taxonomy session by using CSOM.
            var taxSession = SP.Taxonomy.TaxonomySession.getTaxonomySession(spContext);
            //Use the default term store...this could be extended here to support additional term stores.
            var termStore = taxSession.getDefaultSiteCollectionTermStore();

            // Get the term set based on the properties of the term set.
            if (this.Id != null)
                this.RawTermSet = termStore.getTermSet(this.Id); // Get term set by ID.
            else if (this.UseHashtags)
                this.RawTermSet = termStore.get_hashTagsTermSet(); // Get the hashtags term set.
            else if (this.UseKeywords)
                this.RawTermSet = termStore.get_keywordsTermSet(); // Get the keywords term set.

            // Get all terms for the term set and organize them in the async callback.
            this.RawTerms = this.RawTermSet.getAllTerms();
            spContext.load(this.RawTermSet);
            spContext.load(this.RawTerms);
            spContext.executeQueryAsync(Function.createDelegate(this, this.termsLoadedSuccess), Function.createDelegate(this, this.termsLoadedFailed));

Le contrôle de sélecteur de taxonomie puis recherche des correspondances potentielles à partir des conditions chargées et ajoute de nouveaux termes dans le magasin de termes selon vos besoins.

Afficher: