Перейти к основному содержанию
Контакты

Использование jQuery в компонентах Salesforce Lightning

О компании
Опубликовано admin
10 мая 2019
749

При работе с вёрсткой традиционных HTML страниц jQuery используется повсеместно. Эта библиотека позволяет существенно упростить работу с JavaScript. Многие традиционные подходы для взаимодействия со страницей значительно оптимизированы. Благодаря использованию  jQuery помимо сокращения количества кода, зачастую увеличивается и производительность. Также библиотека обеспечивает поддержку старых браузеров. Благодаря этим качествам jQuery очень популярна среди разработчиков. В том числе тех кто переходит на работу в сфере Salesforce. К тому же, благодаря большой популярности, в Сети содержится очень большое количество готовых решений и реализаций на базе jQuery.

 

В нашем блоге мы обсуждаем основные аспекты использования jQuery в Lightning компонентах, в частности, совместимость с  Lightning Locker Service.

 

Мы не можем использовать онлайн-библиотеки JavaScript в компонентах Lightning, но мы можем включить jQuery в качестве статического ресурса с помощью тега ltng: require:

<ltng:require scripts="{!$Resource.jquery331min}" afterScriptsLoaded="{!c.jqueryRun}"/>

Давайте попробуем использовать обычные селекторы jQuery в простой компоненте Lightning, чтобы проверить не блокируется ли стандартный функционал jQuery Лайтнинг компонентой, в частности Lightning Locker Service.

1

QueryTesting.cmp

<aura:component description="jQueryTesting">
   <ltng:require scripts="{! $Resource.jquery331min} " afterScriptsLoaded="{! c.jqueryRun }"/>
   <p>First paragraph</p>
   <p>Second paragraph</p>
   <lightning:button label="Click me" variant="brand" onclick="{! c.buttonHandler }"/>
</aura:component>

 

jQueryTestingController.js:

({
   jqueryRun: function (component, event, helper) {
       $("document").ready(function(){
           console.log('ready is run ');
       });
   },

   buttonHandler: function (component, event, helper) {
      console.log('button is pressed');
       var $firstP = $("p:first").text();

       var $lastP = $("p:last").text();    

       console.log('p: ',firstP);       //input: “p: Hello, I'm here!”
       console.log('p: ',lastP);           //input: “p: Second paragraph”
   },
})

jQuery получает информацию со страницы, селекторы и простые функции, такие как «hide ()» работают отлично.

Теперь добавим пару новых элементов:

<aura:attribute name="inputValue" type="String"/>
  <p class="slds-m-around--small">{! 'inputValue: ' + inputValue}</p>
  <input title="Just input" value="{! v.inputValue}"/>
   <lightning:input label="lightning input" value="{! v.inputValue}"/>

И попробуем изменить атрибуты в HTML тегах при помощи метода “attr()”.

$(input).attr({
           placeholder: 'Please enter the valid value'
       });

jQuery-in-salesforce-lightning-components

Данная функция хорошо подходит для компонент input, но, если вы попробуете изменить атрибут на “lightning: input”, то данная логика работать не будет.

jQuery не поддерживает lightning компоненты. Конечно, в последнем случае, вы можете воспользоваться стандартной кнопкой     с подходящим стилем SLDS (Salesforce Lightning Design System), но я считаю, использование lightning компонент более рациональным подходом.

В Visualforce,  пользуется популярностью плагин jQuery Data Tables, так как позволяет создавать таблицы, написав только одну строку кода.

Давайте посмотрим как это работает в Lightning. Сначала создадим новые статические ресурсы с плагином jQuery Data Tables и добавим в его тег  tng:require:

<ltng:require styles="{! $Resource.datatable + '/DataTables-1.10.16/media/css/jquery.dataTables.min.css'}"

scripts="{!join(',',  $Resource.jquery331min ,                         $Resource.datatable + '/DataTables-1.10.16/media/js/jquery.dataTables.min.js')
                          }"

afterScriptsLoaded="{!c.jqueryRun}"/>

Затем изменим нашу страницу, чтобы загрузить массив аккаунтов. Создаем Apex класс jQueryTestingController:

public with sharing class jQueryTestingController {

    @AuraEnabled
    public static List<Account> getAccounts() {
        List<Account> accounts = [
                SELECT  Id,
                        Name,
                        CreatedDate,
                        Type
                FROM    Account
        ];
        return accounts;
    }
}

И добавляем простой init метод в наш контролер:

init: function (component, event, helper) {

       var action = component.get('c.getAccounts');
       action.setCallback(this, $A.getCallback(function (response) {
           var state = response.getState();
           if (state === "SUCCESS") {
               component.set("v.accounts",  response.getReturnValue());
           }
           else if (state === "INCOMPLETE") {
               console.log('Status incomplete');
           }
           else if (state === "ERROR") {
               var errors = response.getError();
               if (errors) {
                   if (errors.length > 0) {
                       for (var i = 0; i < errors.length; i++) {
                           if (errors[0].pageErrors) {
                               if (errors[0].pageErrors.length > 0) {
                                   for (var j = 0; j < errors[i].pageErrors.length; j++) {
                                       console.log('Internal server error: ' + errors[i].pageErrors[j].message);
                                   }
                               }
                           }
                           console.log(errors[i].message);
                       }
                   }
               }
               else {
                   console.log('Internal server error');
               }
           }
       }));
       $A.enqueueAction(action);
   },

Теперь давайте изменим нашу страницу. Добавьте простую HTML-страницу с имеющимися аккаунтами:

<table id="tableId" class="slds-table slds-table_bordered slds-table_cell-buffer" cellspacing="0" width="100%">

           <thead>
           <tr>
               <th>Name</th>
               <th>Type</th>
               <th>Created Date</th>
           </tr>
           </thead>
           <tbody>
           <aura:iteration items="{!v.accounts}" var="acc">
               <tr>
                   <td>{!acc.Name}</td>
                   <td>{!acc.Type}</td>
                   <td>{!acc.CreatedDate}</td>
               </tr>
           </aura:iteration>
           </tbody>
       </table>

Перезагрузите страницу и увидите обычную таблицу SLDS:

jQuery

Как насчет того, чтобы добавить немного функционала? Для этого используем наш новый плагин.

Для изменения таблицы используем функцию:

 $('#tableId').DataTable();

Обновите страницу и пользуйтесь новой таблицей данных с возможностями поиска, сортировки и пагинации.

jQuery

Все функции нашей таблицы работают отлично. Однако, не стоит забывать о главной проблеме — методы jQuery  для взаимодействия с DOM не соответствуют стандартам безопасности Lightning. Если вы собираетесь использовать компоненты Lightning в Managed Package, избегайте использования jQuery в контроллере и хелпере компоненты. Чтобы избежать проблем с проверкой безопасности (Security Review), вы должны использовать jQuery только в рендере компоненты.

 У Вас остались вопросы? Свяжитесь с экспертами JET BI

 


Вопрос эксперту
Информация по теме
Все материалы
Завершен курс Salesforce Developer
14 марта финальным экзаменом завершился курс Salesforce Developer, организованный командой JET BI для начинающих разработчиков, желающих развиваться в направлении Salesforce.
16 марта 2021
Вебинар Field Service Lightning
15 декабря состоялся вебинар на тему  "Salesforce® Field Service Lightning: Автоматизация работы выездных сотрудников". В качестве спикеров выступили Юлия Соломенко, старший менеджер проектов, и Екатерина Русакович, бизнес-аналитик компании JET BI.
16 декабря 2020
Salesforce
Professional Services
Внедрение Salesforce CRM
Внедрение Salesforce CRM для интернет стартапа в сегменте малого и среднего бизнеса в США, включая базовую настройку, миграцию данных, интеграцию с разными сторонними сервисами и серверной частью основного продукта (включая лицензирование и информацию об использовании синхронизации).
22 Сентября 2020