Иногда Sharepoint может показаться скучным, так что знаете ли вы, как превзойти ваш любимый современный интерфейсный фреймворк, такой как React и Angular.
Идея состоит в том, чтобы работать с совершенно новой парадигмой фреймворков FE внутри Sharepoint, что может быть непросто. Если у вас есть доступ к серверной части и для создания / расширения некоторых REST API, которые должны работать для приложения корпоративного уровня.
Существует несколько API, которые могут выполнять операции CRUD в списках Sharepoint и других API, которые могут выполнять операции с файлами, работать с рабочими процессами, разрешениями, пользователями и т. Д. Идея состоит в том, чтобы позволить внешней структуре управлять всем приложением, как это делает дней почти везде.
Ароматизаторы
Sharepoint Online 365, Sharepoint 2013, Sharepoint 2010, OnPremises
Во всех версиях Sharepoint есть небольшие вариации, в этом вам может помочь документация Microsoft. Поначалу сложно понять их, но для начала я включил служебный файл, который должен обслуживать несколько операций, необходимых для начала разработки вашего проекта, остальное необходимо выяснить из официальных документов Sharepoint. REST API.
Маршрутизация
Маршрутизация в Sharepoint должна быть привязана к конкретной папке.
ПРИМЕЧАНИЕ: используйте здесь Sharepoint index.aspx, потому что Sharepoint не может создавать страницы по умолчанию во всех папках, это означает, что вам нужно переименовать ваш index.html в index.aspx или что-то еще, но здесь важен .aspx.
[** Там могут быть настройки, где вы можете изменить это. В моем случае мой файл .html загружался всякий раз, когда я нажимал на него URL-адрес в браузере, и все .aspx отображались в браузере. Я сделал это локально, который работает с .html, но для Интернета я использовал файл .aspx]
Поскольку вы выполняете развертывание на Sharepoint, убедитесь, что при его создании вы указали правильный base-href путь к вашему приложению, чтобы сценарий мог получить его зависимости.
$ ng build --prod --base-href=/SiteAssets/
Ваш сайт Sharepoint FE теперь будет расположен в https://${tenant}.sharepoint.com/SiteAssets/index.aspx
Если вам нужно развернуть на дочернем сайте Sharepoint
$ ng build --prod --base-href=/subsite/SiteAssets/
https://${tenant}.sharepoint.com/${subsite}/SiteAssets/index.aspx
Службы и REST API
Вот полный список операций, пример службы для связи с Sharepoint REST API, написанной на Angular 8, основные операции crud, операции прикрепления файлов, операции рабочего процесса.
Местное развитие
Локальная разработка может действовать вам на нервы, поскольку вы не можете каждый раз выполнять развертывание на Sharepoint, а API с поддержкой CORS не помогли бы решить эту проблему. Так что, чтобы спасти вас от хаоса, вы можете использовать прокси-сервер. Я не уверен в других фреймворках FE, но Angular предоставляет вам в помощь здоровенный прокси. NodeJS предлагает множество других активаторов прокси, которые вы можете использовать, если не используете Angular.
В корневую папку проекта angular добавьте файл proxy.conf.js, и теперь, когда вы загружаете Angular, вы можете сделать это с помощью
$ ng serve --base-href=/SiteAssets --proxy-config=proxy.conf.js
Как получить / установить cookie?
- Откройте любую из своих страниц Sharepoint в Chrome.
- Перейдите на вкладку "Сеть" в инструментах разработчика.
- Щелкните правой кнопкой мыши любой запрос и скопируйте его как cURL
- Вставьте это в какой-нибудь редактор
- Извлеките и скопируйте заголовок -H cookie: ‹all_cookies›
- Вставьте значение ‹all_cookies› в эту переменную cookie в proxy.conf.js.
- Перезагрузите локальный сервер
DevOps
Существует плагин, который позволяет вам настроить и развернуть ваше приложение FE в домене Sharepoint.
Пакет npm «sp-devops» - это служебная программа командной строки для управления DevOps для Microsoft Sharepoint Online для современных Front-End проектов. Так что установите!
$ npm install sp-devops -save-dev
В package.json вашего проекта добавьте эти скрипты
scripts: {
"sp-ng-build-deploy": "npm run build --prod && sp-devops --deploy",
"sp-ng-create-lists": "sp-devops --setup --sp-spec-list=./<path-to>/<spec.json>"
}
Затем из терминального запуска (это развернет сайт в папке Sharepoint)
$ npm run sp-ng-build-deploy
Вы также можете настроить все свои списки / базы данных здесь. Обратите внимание, что сценарий пытается удалить базы данных, а затем воссоздает их для установки. Вы также можете предварительно заполнить списки, указав данные в файле спецификации.
$ npm run sp-ng-create-lists
Узнать больше о sp-devops
Пример базы кода для запуска sp-DevOps и интеграции Angular и Sharepoint
Инструмент CLI был разработан после создания множества сайтов Sharepoint. Надеюсь, это поможет многим людям, которые могут использовать Sharepoint таким образом.
Ваше здоровье!
