Собственно, вот и весь вопрос. Существует ли Lightning Component позволяющий вывести модальное окно? Или придется делать свое?
Вопрос типа "В SPA не нужны модальные окна" можно поднять, но мне конкретно нужно модальное окно.
Ну раз в SLDS есть модельное окно, значит и компонент должен быть!
https://www.lightningdesignsystem.com/components/modals/
Это что за бред? Как можно без модальных окон? Да даже простой confirmation или alert вывести чтобы не пользоваться стандартными JS alert() и confirm()
Сорян что напряму не ответил навопрос - не практикую Lightning, но хотелось тебя обнадежить. Ща подтянутся адепты Lightning и помогут!
Спасибо, было лень искать.
Так, продолжаю прикручивать костыли на ржавый велосипед. Дошел до того момента, как мне понадобилась modal.
Прикрутил все по феншую, естественно - не заработало. В Lightning меня это уже перестало удивлять. Пришлось взять напильник и конкретненько пройтись по коду.
Имеем, главный компонент, тело модального окна (футер убрал ибо не работает пока ничего, начнем с простого), и метод контроллера. Все сделано с под руководством феншуя из техдокументации.
console.log('ugu');
var modalBody;
var modalFooter;
$A.createComponent("c:modalContent", {},
function(content, status){
if (status === "SUCCESS") {
modalBody = content;
component.find('overlayLib').showCustomModal({
header: "Application Confirmation",
body: modalBody,
showCloseButton: true,
cssClass: "mymodal",
closeCallback: function() {
alert('You closed the alert!');
}
})
}
});По сути, я сначала сделал с оговоркой на задание, но как не заработало - пришлось упрощать до кода в документации. Все утро тут воевал и пробовал дебажить. За производство первоклассного редактора кода предлагаю главному разрабу размотать чалму и повесить его под мостом на ней же.
Из того, что сейчас есть:
$A.createComponent не создает сам компонент, из-за этого callback валится в ошибку. Если делать конкретно через $A.createComponents, то на дебаге там четко видно, что массив созданных компонентов пустой. Ессно, status имеет значние ERROR. Вопрос: какого уха не создаются компоненты? В теле компонента модала не вижу криминала.
<aura:component >
<h1>
it's fucking modal
</h1>
</aura:component>
Вот если честно - блин, ну вот хочется пробить экран, но так как там много чего полезного - сдерживаю себя как могу.
ошибку, кстати выдает: This page has an error. You might just need to refresh it.
[Error in $A.getCallback() [Cannot read property 'setParams' of undefined]]
Тоже в начале пробовал поработать со стандартной модалкой, но была она послана куда подальше.
Сделали свою модалку, которую пихали в любой <div aura:id="modal_placement"></div>
+ всего кастома - ты всегда знаешь что он работает, можешь нарисовать сколько угодно кнопок, пукалок и перделок
- тратишь время
Попробуй добавить function(content, status, errors){....} и посмотреть что за ошибка
+ в лайтнинге нельзя юзать alert, только консоль лог
UPD: наврал, уже походу можно
alert там висит из кода документации - убрать не проблема.
Сейчас отдебажил скрипт в браузере. Вот прям на этой версии кода компонент создается - это раз.
component.find('overlayLib').showCustomModal - валится в ошибку тут, потому что find не может найти overlayLib, а он есть 
Не, вру. Валится конкретно showCustomModal
А еще проверь свой неймспейс
если у тебя на орге он есть, то c:modalcontent - может не работать
надо писать namespace:modalcontent
aura:id="overlayLib" ?
Ну в целом да, не работает фича)
Тут нужен весь код. Не ясно, что находится в компоненте, которая запускает модалку и не ясно как запускается модалка.
п.с. могу сказать, что компонента работает отлично, но пока не очень гибкая. Последний раз проверял пару недель назад.
а я могу сказать что компонента говно полное, раз на пустой компоненте не отрабатывает
Человек что-то упускает и пусть публикует весь код.
Говно она пока только в плане гибкости.
Угу, поставил другой - тоже самое.
if (status === "SUCCESS") {
modalBody = content;
var f = component.find('contactModal');
f.showCustomModal({
header: "Application Confirmation",
body: modalBody,
showCloseButton: true,
//cssClass: "",
closeCallback: function() {
alert('You closed the alert!');
}
})
}сделал вот так вот. В дебаге теперь вижу, что сидит в f, а там все прекрасно, все находит. Валится в ошибку конкретно showCustomModal Какого хера - пишет, что setParams ему не угодили.
Лучше бы индусы вместо программ свою кама-сутру писали дальше.
я тоже только что опробовал код из документации - он не работает, валится чтото в самой overlayLib
Код весь будет или погадим на Salesforce и разбежимся работать? :)
Модал руками делать?
Тебе ж говорят, пустая новая компонента)
<lightning:overlayLibrary aura:id="overlayLib"/>
<lightning:button label="Click" onclick="{!c.handleModal}" />
({
handleModal: function(component) {
$A.createComponent("c:commonmodal", {},
function(content, status, errors){
console.log(content, status, errors)
if (status === "SUCCESS") {
let ol = component.find('overlayLib');
ol.showCustomModal({
header: "Application Confirmation",
body: content,
showCloseButton: true,
cssClass: "mymodal",
});
}
});
},
})
У нас на проекте свой, чтобы не гемороиться каждый раз когда сф выкатит очередную обнову, да и в принципе чтобы не гемороиться )
В каком месте ошибку выдаёт?
ContactManagerComponent.cmp
<aura:component controller="ContactManagerController">
<!-- Attributes -->
<aura:attribute name="data" type="Object"/>
<aura:attribute name="page" type="Integer" default="1"/>
<aura:attribute name="perPage" type="Integer" default="10"/>
<aura:attribute name="filter" type="String" default=""/>
<aura:attribute name="pageCount" type="Integer" default="1"/>
<aura:attribute name="pages" type="List"/>
<aura:attribute name="orderBy" type="String" default="Name"/>
<!-- handlers-->
<aura:handler name="init" value="{! this }" action="{! c.init }"/>
<aura:handler name="searchEvent" event="c:FilterSearchEvent" action="{! c.init }"/>
<aura:handler name="nextPageEvent" event="c:EmptyEvent" action="{! c.init}"/>
<aura:handler name="prevPageEvent" event="c:EmptyEvent" action="{! c.init}"/>
<aura:handler name="selectPageEvent" event="c:PaginatorSelectEvent" action="{! c.pageSelectHandler}"/>
<aura:handler name="sortFieldEvent" event="c:SortTableEvent" action="{! c.orderByHandler}"/>
<aura:handler name="newEvent" event="c:NewContactEvent" action="{! c.showModalClick}"/>
<lightning:overlayLibrary aura:id="contactModal"/>
<c:HeaderTopList filter="{! v.filter }"/>
<c:ContactTableComponent data="{! v.data }"/>
<c:PaginatorComponent page="{! v.page}" perPage="{! v.perPage}" pages="{! v.pages}"/>
</aura:component>
ContactManagerComponentController.js
({
init : function(component, event, helper) {
var reqStructure = helper.getRequestStructure(component);
helper.getContactList(component, reqStructure);
},
pageSelectHandler: function(component, event, helper){
var p = event.getParam("numberPage");
component.set('v.page', p);
var reqStructure = helper.getRequestStructure(component);
helper.getContactList(component, reqStructure);
},
orderByHandler: function(component, event, helper){
var field = event.getParam("sortField");
component.set('v.orderBy', field);
var reqStructure = helper.getRequestStructure(component);
helper.getContactList(component, reqStructure);
},
showModalClick: function(component, event, helper){
console.log('ugu');
var modalBody;
var modalFooter;
$A.createComponent("c:modalContent", {},
function(content, status, errors){
if (status === "SUCCESS") {
modalBody = content;
var f = component.find('contactModal');
f.showCustomModal({
header: "Application Confirmation",
body: modalBody,
showCloseButton: true,
//cssClass: "",
closeCallback: function() {
alert('You closed the alert!');
}
})
}
});
}
})modalContent.cmp
<aura:component >
<h1>
it's fucking modal
</h1>
</aura:component>
This page has an error. You might just need to refresh it.
Error in $A.getCallback() [Cannot read property 'setParams' of undefined]]
"eval()@https://___/components/lightning/overlayLibrary.js:3:469
eval()@https://___/components/lightning/platformOverlayUtils.js:2:4238
a.showCustomOverlay()@https://___/components/lightning/platformOverlayUtils.js:2:4194
showCustomModal()@https://____/components/lightning/overlayLibrary.js:3:251
eval()@https://___/nsp/components/nsp/TestApp.js:16:9"
var f = component.find('contactModal');
f.showCustomModal({
в f на дебаге сидит Object
var f = component.find('contactModal');
f.showCustomModal({
в f на дебаге сидит Object
я бы даже не загонялся с этой компонентой, а пилил бы свою кастомную и универсальную)
Попробуйте вынести component.find за пределы $A.createComponent, т.е. прямо перед созданием находите overlayLib
получится тоже самое) - component.find возвращает референс на overlayLib - ошибка валится в самом overlayLib
Теперь я понимаю почему SF разрабов ищут и ищут и проблема с этим. Это как подходит к тебе председатель колхоза и говорит: пойдешь навоз вилами кидать?
- Нет.
- А за 2000 баксов?
Теперь я понимаю почему SF разрабов ищут и ищут и проблема с этим. Это как подходит к тебе председатель колхоза и говорит: пойдешь навоз вилами кидать?
- Нет.
- А за 2000 баксов?
Ты сейчас сравнил СФ и навоз?)))
Вообще найти разраба на СФ - не проблема, найти нормального - проблема :-)
У нас на конторе была нужда в 10 разрабах нормальных под одного нашего заказчика, но найти 10рых нормальных не оказалось возможным, зато под рукой всегда аутсорсеры, но тут про качество говорить я не буду.
Скорее lightning. Играл в Южный парк? Там такой персонаж есть, мальчик на костылях и с брекетами, а на груди знак молнии. Это Lightning man.
Самое интересное, что когда мне дали это задание поделать, то в принципе, пошуршал я trailhead'ами, и в Classic свободненько сделал и пагинацию, и сортировку по полям и SOQL\SOSL. Ну, думаю, какое легкое задание. Потом увидел, что фронтенд должен быть Lightning App. Вторая неделя пошла.
Смотря что понимать под нормальным. Если это полностью самодостаточная личность технически и в английском, то он будет сидеть на удалёнке и даже не будет отвлекаться ни на что, а если хороший девелопер, но английский средний(типа Inter), то такие есть.
Только что проверил на новом дев орге и всё работает.
<aura:component implements="force:appHostable" >
<lightning:overlayLibrary aura:id="overlayLib"/>
<lightning:button label="Click" onclick="{!c.handleModal}" />
</aura:component>
({
handleModal: function(component) {
var overlayLib = component.find('overlayLib');
$A.createComponent(
"c:ModalContent",
{},
function(content, status, error){
console.log(content, status, error);
if (status === "SUCCESS") {
overlayLib.showCustomModal({
header: "Application Confirmation",
body: content,
showCloseButton: true
});
}
});
}
})<aura:component >
Test Content
</aura:component>
Ну вот поэтому я и не вижу смысл в стандартных компонентах, которые иногда работают, иногда нет
На данном этапе я столкнулся только с проблемой гибкости, если, к примеру, в самом попапе нужно делать что-то сложнее, чем просто сообщение. Тогда уже нужно напрягаться и свои модалки могут оказаться проще, если они уже есть :)
Нашел блог какого-то индуса, который пошагово показывает как сделать. В принципе - код тот же самый и все работает, но в комментах ему пишут, что не работает и показывают эту же ошибку. Индус слился. Ответов почему - нету. Индус, как я понял, партнер SF
Только что создал новый App, новый mainComponent, новый modalComponent - код отсюда. Не работает
Я в шоке. В браузере проблема может быть?
Апп тут не нужен. К той же табе привязывать можно сразу компоненту, которая реализует нужный интерфейс.
Да, но, согласись. Какая разница куда привязывать компонент, если он нихт арбайтен
Я пока не знаю как сделать, чтобы не работало.
Мой вариант 100% рабочий.
Давай доступ на орг. Люди глянут что не так.
Вот представляешь, если вычеркнуть trailhead, то этим lightning-ом я занимаюсь примерно неделю, а ты начинаешь разговаривать со мной как с умным человеком
Так, ладно, объясните мне дурачку, почему мой компонент через App Builder работает, а через Preview Developer Console нет?
с overlay library? или кастомное что-то? вообще превью это что-то с чем-то)) стараюсь не пользоваться, а смотреть конкретно по требованиям - если надо чтобы работало в community - смотрю в коммунити, на VF - смотрю там, app builder - смотрю там.
Не нужно этим пользоваться :)
Есть Visual Studio 2019, но расширений для работы с SF я там не нашел.
Есть Visual Studio Code, поставил расширения, сниппеты и прочую фигню. Куда-то конектится, что там деплоит. Но реально не могу доехать. Захожу на developer.salesforce.com => My Developer Account => Ну, вот я и дома, можно че-то делать.
Как указать VS Code что мою папку на диске надо синхронизировать конкретно с этим местом? А может я захочу сделать New Playground и засинхронизировать другую папку, а vs просто просит меня залогинится, перекидывает на браузер и все. Куда оно подключилось, где структура проекта, почему файлы сделанные в vs в sf деплоятся, а наоборот нет - хез.
Я бы с радостью закинул это недоразумение.
Я вот работал с облаком Azure. Нет, вот реально, мелкософт поставляет все, чтобы работать локально на компьютере или сетке. При этом для тестирования работы облачных сервисов тебе не надо держать онлайн с облаком. Деплой - да пожалуста, три клика и весь твой проект развернут в Azure - успевай платить.
Ну так салесфорс это это контора в которой маркетологи не зря едят свой хлеб!
Мы пользуем inteliji idea(есть бесплатные версии) + illuminated cloud(стоит денег, 30дней триал)
vs code + sfdx - официально форсится СФ, лично я не использовал, потому что я люблю GUI и не люблю консольные команды
vs code + mavens mate - мавенс мейт прекратил свою долгую и успешную жизнь несколько лет назад, но даже в том состоянии им можно(многие до сих пор пользуются) пользоваться
vs code + рандомный индусский плагин - не рекомендовал бы даже рассматривать все это дело.
MS начали штамповать новую версию каждый год?
Сохранение происходит автоматом(ctrl+s). Создание метадаты и прочие команды - через меню ctrl+shift+P. 
Через год. 2015 - 2017 - 2019
2019 запилили конкретно под глубокую интеграцию с git, Azure и свое новое детище .Net Core
Сохранение происходит автоматом(ctrl+s). Создание метадаты и прочие команды - через меню ctrl+shift+P. :)
что по поводу retreive, deploy, metadata convert(туда сюда), засейвать на другой орг, подтянуть с другого орга, добавить новый орг, создать скратч орг и прочее?
+ покрытие тестами, запуск тестов, execute anon?
а еще вопрос что там с dev hub? раньше он был обязателен чтобы работать с sfdx, а сейчас? я могу подключить рандомный орг для разработки и чтобы все фичи при этом остались рабочими?
Через год. 2015 - 2017 - 2019
2019 запилили конкретно под глубокую интеграцию с git, Azure и свое новое детище .Net Core
я кстати считаю что студия это лучшая идее которую я когда либо пользовал, эх, помню как решарпер впервый раз поставил )))))
Аналогично и категорически поддержу. После VS садишься за Developer Console - это как из Бентли пересесть в Запорожец. Везде говно и мерещатся велосипеды на костылях
Не подскажу
Я из-за лени пользуюсь на обычных оргах мавенсмейт плагином, а на sfdx оргах - sfdx плагином
п.с. у тебя, судя по списку, очень насыщенный девелоперский день. У меня всё скромнее. Подключился к оргу, покодил/позаливал на гит и выключил ПК, когда закончил 
Туда нужно садиться только в очень крайнем случае. Девелопить нужно в IDE, а не браузере.
Кстати, у тебя в конторе хоть раз публиковали вакансии или только через знакомых искали всех работников?
п.с. я за несколько лет не видел ни одной :p
Через знакомых самый качественный способ нанимать людей!!! Хотя и самый медленный
Поэтому я давно призываю побольше общаться и заводить знакомства.
Нет, у нас девочка собирала всегда линкедин профили, давала нам на ревью, а потом собес если чел подходил. А вообще вакансии есть, но на зарубежных сайтах где-то там
А если человек, скажем так, говорит: я тут самостоятельно в trailhead получил developer intermediate, чего-то знаю, чего-то нет, но учусь быстро и нет замашек it-боярина. У него есть возможность попасть к команду?
Никто наслово в нашем мире верить не будет и не должен.
Не вижу проблем с тестовым заданием - если человек знает и умеет - тестовое задание для него полдня работы - квест пройден, получи рабочее место, распишись. Если человек неделю тестовое задание мурыжит, пусть он хоть 100 раз developer intermediate и быстро обучаем - смысла от этого 0.
Кстати чет, не обратил внимания
Тема то не про найм, а про модельные окна.
Так что сам тоже виноват, но призываю остальных тоже следить за изначальной темой и не уходить в сторону с рассуждениями.
Если хочется пообщаться - создаем новую тему или ищем подходящую уже созданную!
Если надо простое поп ап окошко, то я юзаю вот - http://www.sfdcpoint.com/salesforce/modal-popup-lightning-component-salesforce/
Думал насчет самописного модала, но отверг сие предложение не потому-что думать не могу, а потому-что задача стоит сделать тестовое задание и понять как эта кухня варит и вкусные ли пирожки получаются. Пока что я вижу, что пирожки эти политы толстым слоем соуса карри, которые делают заботливые руки индусских коллег. И если бы писал самописный модал, то тупо кинул бы bootstrap в ресурсы и получил готовое, гибкое решение с офигенным функционалом и минимумом геморроя.
А так, изучив работу сего компонента, могу с уверенностью сказать - офигенная штука. Да, сей мопед заводится через "ну йоп жеж твою мать", но штука прикольная. В рамках той концепции, на которой работает молния - по другому не получилось бы.
Не факт что заработает. Возможны конфликты. Если будет время и желание можешь проверить? Я думаю всем будет интересно заработает ли бутстрап модалка в Lightning или нет.
Ну, мне осталось допились передачу данных из формы модала в основной компонент и создание/удаление контакта на сервере. Можно будет сдавать, а потом ради прикола запилю модал таким макаром. Главное не забыть.
Кстати, вот подумал, в блоге можно описывать такие моменты не на уровне ctrl+c => ctrl+v = смотрите, модал заработал, а на уровне логики работы и принципов поведения для применения на практике.
Тот же блог индуса - показал как сделать модал, но основной код работы и логики - это datatable, и на законный вопрос "че-то не работает", законный ответ "хез"
Да, кстати, посмотрел код и мне кажется, что этот модал не закроется, если кликнуть вне окна
Ну по хорошему он и не должен закрываться, потому как внутри у тебя может быть что-то очень важное, так что кнопки и X это то что нужно. А то будет случайный клик и ты такой: БЛЯ.....
Вообще в лайтнинге много чего не предусмотрено, по сути у них просто такой css/js framework starter pack, в котором вроде бы все есть, но если копнуть чуть чуть глубже, получается что на самом деле кроме обертки ничего и нет
Угу, но любой индус, который принимал участие в написании сего чуда скажет, что если ты не любишь кошек, значит используешь мало соуса карри.
