Lightning Message Service в Visualforce

Друзья подскажите по такому моменту.

Хочу попробовать замутить интересную штуку.

Хочу использовать некоторые сторонние JS либы, но без загрузки их в статик ресурсы и LWC.

Нашел интересный вариант с использование Visualforce в качестве компоненты + коммуникация через Lightning Message Service (LMS)

Но уперся в то что LMS недоступен в Visualforce если использовать его через /apex/MyVFPage и засовывать внутрь iframe.

получаю такую ошибку
sforce is not defined

Есть какие вариант это обойти?

нашел что VF можно вставить внутрь Lightning App Builder вместо того чтобы использовать iframe, но хотелось бы как то засунуть его непосредственно в LWC компонент.

Dmitry Shnyrev

Друзья подскажите по такому моменту.

Хочу попробовать замутить интересную штуку.

Хочу использовать некоторые сторонние JS либы, но без загрузки их в статик ресурсы и LWC.

Нашел интересный вариант с использование Visualforce в качестве компоненты + коммуникация через Lightning Message Service (LMS)

Но уперся в то что LMS недоступен в Visualforce если использовать его через /apex/MyVFPage и засовывать внутрь iframe.

получаю такую ошибку
[b]sforce is not defined[/b]

Есть какие вариант это обойти?

нашел что VF можно вставить внутрь Lightning App Builder вместо того чтобы использовать iframe, но хотелось бы как то засунуть его непосредственно в LWC компонент.

Вот отсюда ноги растут
https://developer.salesforce.com/docs/at ... ions.htm

Dmitry Shnyrev

Вот отсюда ноги растут
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/message_channel_considerations.htm

Немного расширю вопрос. Как я вижу LMS в чистом VF (загруженным в ифрейм через /apex/SomePage) не работает.

Поэтому как можно передать сообщение или лучше дернуть метод внутри ифрейма из LWC?

пробую через

let el = this.template.querySelectorAll('.google-maps-iframe')[0];

1. el.contentWindow.someMethod() - не работает. просто зависает на этой строчке выполнение и дальше не идет

2. el.contentWindow.postMessage("SOME MESSAGE") - строчка отрабатывает, но внутри VF не ловится (хотя если напрямую в VF страницы через window сделать, отрабатывает).

3. Предложили изменять url в ифрейме после #, но как только меняешь атрибут src (по типу el.setAttribute('src', this.vfPageBase + "#MESSAGE!!!!!")) ифрейм полностью перезагружается вместо того чтобы оставаться таким же но генерить событие внутри "hashchange"

Какие еще могут быть предложения как сделать канал связи LWC -> iframe

Dmitry Shnyrev

Немного расширю вопрос. Как я вижу LMS в чистом VF (загруженным в ифрейм через /apex/SomePage) не работает.

Поэтому как можно передать сообщение или лучше дернуть метод внутри ифрейма из LWC?

пробую через 

let el = this.template.querySelectorAll('.google-maps-iframe')[0];

1. el.contentWindow.someMethod() - не работает. просто зависает на этой строчке выполнение и дальше не идет

2. el.contentWindow.postMessage("SOME MESSAGE") - строчка отрабатывает, но внутри VF не ловится (хотя если напрямую в VF страницы через window сделать, отрабатывает).

3. Предложили изменять url в ифрейме после #, но как только меняешь атрибут src (по типу el.setAttribute('src', this.vfPageBase + "#MESSAGE!!!!!")) ифрейм полностью перезагружается вместо того чтобы оставаться таким же но генерить событие внутри "hashchange"

Какие еще могут быть предложения как сделать канал связи [b]LWC -> iframe[/b]

Заработал postMessage!!!!!!!!!!!

el.contentWindow.postMessage('My Test Message', "*");

https://developer.mozilla.org/ru/docs/We ... tMessage

я не особо уделил второму параметру внимания и неправильно его использовал. сначала без него пробовал, потом не тот адрес подставлял. Оказывается * работает!!!!!!!!!!!!!!!!!!!

Dmitry Shnyrev

Заработал postMessage!!!!!!!!!!!

el.contentWindow.postMessage('My Test Message', [b]"*"[/b]);

https://developer.mozilla.org/ru/docs/Web/API/Window/postMessage

я не особо уделил второму параметру внимания и неправильно его использовал. сначала без него пробовал, потом не тот адрес подставлял. Оказывается * работает!!!!!!!!!!!!!!!!!!!

:party::party::party::party::party:

Интересный монолог получился:)

wilder

Интересный монолог получился:)

Да самому нравится.

Я тут затеял одно тестовое приложение на LWC запилить в рамках изучения этого самого LWC и неплохо так преуспел. Сначала меня сильно напрягала возможность использования сторонних решений в LWC, но с данных хуком + iframe Visualforce открылись все горизонты. К примеру запилил очень интересный LWC компонент который представляет собой LWC обертку над Google Maps API. Теперь у меня есть LWC компонент с картой, но не этот убогий стандартный, а со всеми возможностями Google Maps API. Конечно магия которая творится внутри с VF не из разряда простых, но блин, и я же не первый год во фронтенде варюсь. Вот подтянул таким образом свои пробелы в LWC. Теперь готов возвращаться обратно в SF проекты

Dmitry Shnyrev

Да самому нравится. 

Я тут затеял одно тестовое приложение на LWC запилить в рамках изучения этого самого LWC и неплохо так преуспел. Сначала меня сильно напрягала возможность использования сторонних решений в LWC, но с данных хуком + iframe Visualforce открылись все горизонты. К примеру запилил очень интересный LWC компонент который представляет собой LWC обертку над Google Maps API. Теперь у меня есть LWC компонент с картой, но не этот убогий стандартный, а со всеми возможностями Google Maps API. Конечно магия которая творится внутри с VF не из разряда простых, но блин, и я же не первый год во фронтенде варюсь. Вот подтянул таким образом свои пробелы в LWC. Теперь готов возвращаться обратно в SF проекты :rolling:.

Кстати огромный респект Maxim Elets!!!

Я сперва думал освещать весь процесс тут на форуме, и вопросы выкладывать сюда, но все уперлось во время. Хотелось быстрее получать ответы. Поэтому наша телеграм беседа прям бурлила каждый день. Теория теорией, но только практика позволят понять что реально нужно использовать, а что просто знать. Макс отлично с этим помог!!!!!!!!!!!! СПАСИБО Макс!!!

Dmitry Shnyrev

Кстати огромный респект Maxim Elets!!! :smile: 
Я сперва думал освещать весь процесс тут на форуме, и вопросы выкладывать сюда, но все уперлось во время. Хотелось быстрее получать ответы. Поэтому наша телеграм беседа прям бурлила каждый день. Теория теорией, но только практика позволят понять что реально нужно использовать, а что просто знать. Макс отлично с этим помог!!!!!!!!!!!! СПАСИБО Макс!!!

Dmitry Shnyrev

оэтому наша телеграм беседа прям бурли

Ну так телегу в студию:)

wilder

[quote="Dmitry Shnyrev"]оэтому наша телеграм беседа прям бурли[/quote]
Ну так телегу в студию:)

wilder

Dmitry Shnyrev
оэтому наша телеграм беседа прям бурли
Ну так телегу в студию:)

Не, я про личку

Dmitry Shnyrev

[quote="wilder"][quote="Dmitry Shnyrev"]оэтому наша телеграм беседа прям бурли[/quote]
Ну так телегу в студию:)[/quote]
Не, я про личку :smiley::smiley::smiley: