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

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

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

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

 


Вопрос эксперту

We have available resources to start working on your project within 5 business days

2 Senior Developers

1 SF Consultant

2 QA engineers

2 Admins

Информация по теме
Все материалы
Завершен курс 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