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

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

Категория: Salesforce FAQ
Опубликовано: Май, 10, 2019

При работе с вёрсткой традиционных 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.

 

 

 

 

 

 

 

 

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'
       });

Нажмем на кнопку и получим результат:

Данная функция хорошо подходит для компонент 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:

 

 

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

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

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

 

 

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

 

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

 

Поделиться

Спасибо за то, что отправили форму. Мы свяжемся с Вами в течении 1-2 рабочих дней.
Узнавайте первыми о важных новостях и событиях из мира IT

О нас

Мы разрабатываем и внедряем решения класса Business Intelligence на базе платформ SAP BO/BW. Мы также предоставляем полный спектр консалтинговых услуг для Salesforce: внедрение Salesforce и индивидуальная доработка, поддержка, а также решения для ISV. Департамент Мобильной разработки специализируется на разработке бизнес-приложений на iOS и Android.

Связаться с нами

JET BI

Беларусь, Минск
220002, пр-т Машерова,19, 8 эт.
Телефон: +375 17 334 24 16

Проекты: sales@jetbi.com

Карьера: jobs@jetbi.com

Социальные сети