воскресенье, 11 октября 2015 г.

Cisar

В этом году я сделал одну большую вещь - Cisar. Это встроенное в браузер (точнее в F12 DevTools) мини-IDE, предназначенное для создания CSR (Client Side Rendering) кастомизаций в SharePoint. Главная фишка Cisar'а в том, что он поддерживает Live Preview, т.е. набираем код и сразу же, в реальном времени, видим результаты его работы на странице.

Это позволяет работать очень эффективно и создавать решения по кастомизации форм буквально за считанные минуты. Не шучу. Был даже реальный случай: коллега на работе оценил некоторую задачу по кастомизации форм в час работы, там надо было заменить текстовое поле dropdown'ом, причем он (коллега) с CSR очень хорошо дружит. Я с ним поспорил на пиво, что смогу сделать за 3 минуты с помощью Cisar. Проиграл: сделал за 5 :)


Поддерживается CSR для:
  1. Форм списков
  2. Представлений списков
  3. Представлений списков в режиме Quick Edit
НЕ поддерживается на данном этапе CSR для результатов поиска, и вообще Display Templates как класс. Надеюсь это добавить в будущем, но это технически нетривиально.

До последнего времени Cisar плохо работал с не-root сайт-коллекциями, но у меня наконец-то дошли руки это поправить и теперь проблем быть не должно. Но версия все еще Beta, так что огромная просьба, всем кто будет использовать, пишите багрепорты!! Сюда в комментарии, или на GitHub, куда-нибудь в общем... :)

Cisar полностью бесплатен, open source, лицензия "Public Domain" (это означает, делайте вообще все что угодно с ним, никаких ограничений).

С технической точки зрения Cisar - это расширение для Chrome, написанное кстати на TypeScript. Для подсветки синтаксиса используется редактор codemirror. Для отображения списка файлов используется KnockoutJs. Для Live Preview используются результаты нескольких недель копания в кишках CSR, если вы думаете что это просто eval, можете посмотреть код :)

Исходники доступны на GitHub.
Само расширение можно скачать из Chrome Web Store.

Также, если кто-то вдруг пропустил мои статьи по CSR, с множеством примеров кастомизаций (большинство из которых были созданы с помощью Cisar), ссылки ниже (статьи на английском):
P.S. На самом деле так привык к Cisar, и так удобно, что теперь уже даже пытаюсь его использовать для любого клиентского кода. И как я раньше писал JSOM-код без intellisense!? :)

19 комментариев:

  1. Большое спасибо! Прокачался по CSR по вашим статьям, профит невероятный :)

    ОтветитьУдалить
  2. Большое спасибо Андрей, что облегчаете нам жизнь :)

    ОтветитьУдалить
    Ответы
    1. Евгений, спасибо :) Багрепорты пишите если что! :)

      Удалить
  3. Добрый день, может немного не по адресу (пните, если так), не могли бы вы подсказать как посмотреть на портале SharePoint размер файлов и папок и кто последний изменял их? может какая-то дополнительная программа есть для этого? Заранее спасибо =)

    ОтветитьУдалить
  4. Огромное спасибо за отличный инструмент!
    Результат прямо на глазах.

    ОтветитьУдалить
  5. Андрей инструмент - бомба!
    начал использовать,
    спасибо огромное.

    ОтветитьУдалить
  6. Андрей привет!
    первый фидбек)
    при физическом удалении файла(через SPD), твой плагин кидает ошибку,
    "Cisar fatal error when saving file test5.js to path "/style%20library": file not found."
    что не может найти его, (пусть удаляет из JSLink)

    и сразу вопрос:
    работаю со свойствами страницы (custom layout),
    как можно получить доступ к полю JSLink (не черз код),
    через web или дизайнер

    спасибо

    ОтветитьУдалить
    Ответы
    1. Привет.

      Ну вроде логично, файла нет, соответственно сохранить не получается.
      "Пусть удаляет из JSLink" - нене, программа не должна делать то, что ее не просят делать. Например если просто доступа нет к файлу, или еще какая-то другая ошибка - что, тоже удалять из JSLink? Так можно половину кастомизаций случайно потереть и потом думать, какие же блин файлы тут были...

      Если нужно удалить файл, просто удали его из Cisar (ткнуть на файл, и дальше на крестик). Он удалит из JSLink тоже. Если файл уже удален, крестик удалит его из JSLink.

      К JSLink есть доступ через редактирование страницы в браузере, в свойствах веб-части.

      Удалить
    2. Спасибо Андрей за быстрый отклик.
      проверил с "крестиком" в твоем плагине, он удаляет его,
      но только в плагине, по рефрешу на странице, снова появляется, пришлось идти и через дизайнер удалять, из папки и потом с формы из JSLink..

      и еще вопрос к тебе, если мы говорим о custom content type и custom layout с этого типа,
      как ограничить дествие скрипта только этим типом, он же привязывается к форме всей папки страниц ?

      спасибо

      Удалить
    3. Хм, а у меня удаление через Cisar работает без проблем. Особенно если Cisar сам файл создавал, он его удалить обычно может без проблем. Если не сам, то возможны огрехи.

      CSR поддерживает декларативное нацеливание кастомизаций на конкретные:
      1. ListTemplateType
      2. BaseViewID
      3. ViewStyle
      Подробности и примеры - в посте Введение в CSR.

      Cisar кстати автоматически прописывает некоторые из этих параметров, когда создаешь файл.

      Все остальное реализуется проверками внутри кода шаблонов, по ctx.
      В зависимости от того, это представление списка, Quick Edit или форма списка, ctx разный. Можно сделать console.log(ctx) и посмотреть, какие там доступны сведения. Или воспользоваться интеллисенсом :)

      Удалить
    4. Спасибо Андрей, буду копаться)

      Удалить
  7. Этот комментарий был удален автором.

    ОтветитьУдалить
  8. Андрей, благодарю за прекрасный инструмент для разработки!
    Если есть возможность, прошу добавить отображение статуса (как в консоль логе) на главном экране плагина после сохранения скрипта.
    А то каждый раз приходится после сохранения залезать в консоль и ждать успешного лога от Cisar

    ОтветитьУдалить

Внимание! Реклама и прочий спам будут беспощадно удаляться.

Примечание. Отправлять комментарии могут только участники этого блога.