Поделиться через

Настройка пользовательского интерфейса сайта SharePoint с помощью JavaScript

  • Статья

Вы можете обновить пользовательский интерфейс своего сайта SharePoint с помощью JavaScript.

Область применения: Office 365 | SharePoint 2013 | SharePoint Online

Важно!

Такая расширяемость доступна только для классического интерфейса SharePoint. Эту возможность нельзя использовать вместе с современным интерфейсом в SharePoint Online, например на сайтах для общения. Также обратите внимание, что не следует создавать зависимость от структуры страницы HTML или имен готовых стилей CSS, так как они могут быть изменены без уведомления.

Пример надстройки Core.EmbedJavaScript добавляет сообщение строки состояния на все страницы сайта SharePoint и удаляет ссылку создать дочерний сайт со страницы Содержимое сайта с помощью JavaScript.

Используйте это решение, если нужно применить обновления пользовательского интерфейса на сайте SharePoint с помощью JavaScript (иногда называется методом внедрения JavaScript) вместо создания пользовательских эталонных страниц.

До начала работы

Чтобы приступить к работе, скачайте пример надстройки Core.EmbedJavaScript из проекта шаблонов и методик для разработчиков Office 365 на сайте GitHub.

Использование приложения Core.EmbedJavaScript

При запуске этого примера кода отображается надстройка, размещенная у поставщика, как показано на рисунке 1.

Рис. 1. Снимок экрана: начальная страница надстройки Core.EmbedJavaScript

Снимок экрана начальной страницы примера внедрения JavaScript

При выборе настройки внедрения сайт SharePoint настраивается следующими параметрами:

  • Создает сообщение строки состояния на всех страницах сайта SharePoint, как показано на рисунке 2.

  • Удаление ссылки на новый дочерний сайт из содержимого сайта , как показано на рис. 3.

Рис. 2. Снимок экрана: строка состояния, добавленная на все страницы

Строка состояния, добавленная на все страницы сайта SharePoint

Рис. 3. Снимок экрана: ссылка на новый дочерний сайт, удаленная со страницы "Содержимое сайта"

Новая ссылка на дочерний сайт на странице

На рисунке 1 выбор внедрения вызовов настройкиbtnSubmit_Click в default.aspx. btnSubmit_Click вызывает метод AddJsLink, выполняющий указанные ниже действия.

  1. Создает строку, представляющую определение блока скрипта. Это определение блока скрипта указывает на файл JavaScript (scenario1.js), содержащийся на всех страницах сайта SharePoint.

  2. Использует UserCustomActions для получения всех пользовательских действий, определенных на сайте SharePoint. Все существующие ссылки на файл JavaScript с именем scenario1.js удаляются.

  3. Создает новое настраиваемое действие и назначает ему определение блока скрипта, созданное на этапе 1.

  4. Добавляет новое настраиваемое действие на веб-сайт.

Теперь все страницы на сайте SharePoint будут запускать файл scenario1.js и отображать настройки пользовательского интерфейса, показанные на рисунках 2 и 3.

Примечание.

Код, приведенный в этой статье, предоставляется "как есть" без какой-либо явной или подразумеваемой гарантии, включая подразумеваемые гарантии пригодности для какой-либо цели, для продажи или гарантии отсутствия нарушения прав иных правообладателей.

 public void AddJsLink(ClientContext ctx, Web web)
        {
            string scenarioUrl = String.Format("{0}://{1}:{2}/Scripts", this.Request.Url.Scheme, 
                                                this.Request.Url.DnsSafeHost, this.Request.Url.Port);
            string revision = Guid.NewGuid().ToString().Replace("-", "");
            string jsLink = string.Format("{0}/{1}?rev={2}", scenarioUrl, "scenario1.js", revision);

            StringBuilder scripts = new StringBuilder(@"
                var headID = document.getElementsByTagName('head')[0]; 
                var");

            scripts.AppendFormat(@"
                newScript = document.createElement('script');
                newScript.type = 'text/javascript';
                newScript.src = '{0}';
                headID.appendChild(newScript);", jsLink);
            string scriptBlock = scripts.ToString();

            var existingActions = web.UserCustomActions;
            ctx.Load(existingActions);
            ctx.ExecuteQuery();
            var actions = existingActions.ToArray();
            foreach (var action in actions)
            {
                if (action.Description == "scenario1" &&
                    action.Location == "ScriptLink")
                {
                    action.DeleteObject();
                    ctx.ExecuteQuery();
                }
            }

            var newAction = existingActions.Add();
            newAction.Description = "scenario1";
            newAction.Location = "ScriptLink";

            newAction.ScriptBlock = scriptBlock;
            newAction.Update();
            ctx.Load(web, s => s.UserCustomActions);
            ctx.ExecuteQuery();
        }

SharePoint использует стратегию минимальной загрузки для уменьшения объема данных, скачиваемых браузером, когда пользователи переходят между страницами на сайте SharePoint. Дополнительные сведения см. в статье Обзор стратегии минимальной загрузки. В scenario1.js следующий код гарантирует, что на сайте SharePoint используется стратегия минимального скачивания , RemoteManager_Inject всегда выполняется.

// Is MDS enabled?
if ("undefined" != typeof g_MinimalDownload && g_MinimalDownload && (window.location.pathname.toLowerCase()).endsWith("/_layouts/15/start.aspx") && "undefined" != typeof asyncDeltaManager) {
    // Register script for MDS if possible
    RegisterModuleInit("scenario1.js", RemoteManager_Inject); //MDS registration
    RemoteManager_Inject(); //non MDS run
} else {
    RemoteManager_Inject();
}

Функция RemoteManager_Inject выполняет указанные ниже задачи на сайте SharePoint.

  • Создает строку состояния на хост-сайте. RemoteManager_Inject использует SP.SOD.executeOrDelayUntilScriptLoaded, чтобы обеспечить загрузку sp.js перед вызовом метода SetStatusBar для добавления строки состояния на сайт. Так как файлы JavaScript загружаются асинхронно, использование SP. SOD.executeOrDelayUntilScriptLoaded обеспечивает загрузку файла JavaScript (sp.js) перед вызовом кодом функции, определенной в этом файле JavaScript.

  • Скрывает ссылку на новый дочерний сайт на странице Содержимое сайта .

function RemoteManager_Inject() {

    loadScript(jQuery, function () {
        $(document).ready(function () {
            var message = "<img src='/_Layouts/Images/STS_ListItem_43216.gif' align='absmiddle'> <font color='#AA0000'>JavaScript customization is <i>fun</i>!</font>"

            // Execute status setter only after SP.JS has been loaded
            SP.SOD.executeOrDelayUntilScriptLoaded(function () { SetStatusBar(message); }, 'sp.js');

            // Customize the viewlsts.aspx page
            if (IsOnPage("viewlsts.aspx")) {
                //hide the subsites link on the viewlsts.aspx page
                $("#createnewsite").parent().hide();
            }
        });
    });
}

function SetStatusBar(message) {
    var strStatusID = SP.UI.Status.addStatus("Information : ", message, true);
    SP.UI.Status.setStatusPriColor(strStatusID, "yellow");
}

function IsOnPage(pageName) {
    if (window.location.href.toLowerCase().indexOf(pageName.toLowerCase()) > -1) {
        return true;
    } else {
        return false;
    }
}

См. также