Регистрация  |  Вход

Как передать/получить параметр в Lightning Component?

Итак дано.
Лайт страница для стандартного объекта и кастомный компонент. У компонента есть аттрибуты. Компонент помещен на страницу в Лайт билдере. Как передать/получить параметры?
Про хак с window.location знаю. Пробовал через дизайн параметры - не работает. Может еще варианты?
зы. В обычном one.app параметры апликухи передаются без проблем.

Итак дано.
Лайт страница для стандартного объекта и кастомный компонент. У компонента есть аттрибуты. Компонент помещен на страницу в Лайт билдере. Как передать/получить параметры?
Про хак с window.location знаю. Пробовал через дизайн параметры - не работает. Может еще варианты?
зы. В обычном one.app параметры апликухи передаются без проблем.

Какие параметры? Откуда их надо передавать?
Если это страница записи, то получить ид записи можно через 'force:hasRecordId' интерфейс.
Если это настраиваемая компонента и параметры статические, то через билдер можно передать параметры в design аттрибуты
Если параметры нужно передать с другой компоненты на этой странице, используйте ивенты
Если параметры надо передавать при переходе на эту страницу, то только через параметры строки запроса.

Какие параметры? Откуда их надо передавать?
Если это страница записи, то получить ид записи можно через 'force:hasRecordId' интерфейс.
Если это настраиваемая компонента и параметры статические, то через билдер можно передать параметры в design аттрибуты
Если параметры нужно передать с другой компоненты на этой странице, используйте ивенты
Если параметры надо передавать при переходе на эту страницу, то только через параметры строки запроса.

Добрый день Виктор,

компонент может работать с параметрами / переменными. Данные поступают в компонент

1. Design attribute (from builder Community builder, App builder):
*Нaсколько я вижу - ответ на вопрос в 1м варианте


1.1
Объявить:

.js 
<aura:attribute name="attrname" type="String"/>
.design
<design:attribute name="attrname" label="Label for the builder"/>

How to use:
...controller.js, ...helper.js

var x = cmp.get('v.attrname');
cmp.set('v.anotherattr', 'v.attrname');

...js

<lightning:button .... label="{! v.attrname }" .../>

1.2
В builder даем значение. Публикуем.

2. Сервер call:

var a = cmp.get('functionname'); 
...
$A.enqueueAction(a);

3. By an event from another component
4. URL, cookie. JS функции чтобы получить value.

URL param:

getParameterByName: function(name, url) {
if (!url) {
url = window.location.href;
}

name = name.replace("/[\[\]]/g", "\\$&");

var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
var results;

try {
results = regex.exec(url);
} catch (e) {
this.consoleLog(e);
}

if (!results) {
return null;
}

if (!results[2]) {
return '';
}

return decodeURIComponent(results[2].replace("/\+/g", " "));
}

5. static resource


Успехов)

Добрый день Виктор,

компонент может работать с параметрами / переменными. Данные поступают в компонент

1. Design attribute (from builder Community builder, App builder):
*Нaсколько я вижу - ответ на вопрос в 1м варианте


1.1
Объявить:
[code].js 
<aura:attribute name="attrname" type="String"/>
.design
<design:attribute name="attrname" label="Label for the builder"/>[/code]

How to use:
...controller.js, ...helper.js
[code]var x = cmp.get('v.attrname');
cmp.set('v.anotherattr', 'v.attrname');[/code]

...js

[code]<lightning:button .... label="{! v.attrname }" .../>[/code]

1.2
В builder даем значение. Публикуем.

2. Сервер call:

[code]   var a = cmp.get('functionname'); 
   ...
   $A.enqueueAction(a);[/code]
3. By an event from another component 
4. URL, cookie. JS функции чтобы получить value.

   URL param:

[code]   getParameterByName: function(name, url) {
        if (!url) {
            url = window.location.href;
        }
        
        name = name.replace("/[\[\]]/g", "\\$&");
        
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
        var results;
        
        try {
            results = regex.exec(url);
        } catch (e) {
            this.consoleLog(e);
        }
        
        if (!results) {
            return null;
        }
        
        if (!results[2]) {
            return '';
        }
        
        return decodeURIComponent(results[2].replace("/\+/g", " "));
    }[/code]

5. static resource


Успехов)

Вау! На форуме появилось новое поколение SF разработчиков!!!
Не думал что увижу как Lightning направление начнет жить!
Жаль что не могу присоединиться к дискуссии потому что полный нуб в Lightning.
Жду интересных вопрос и не менее интересных ответов!!!

Вау! На форуме появилось новое поколение SF разработчиков!!!
Не думал что увижу как Lightning направление начнет жить!
Жаль что не могу присоединиться к дискуссии потому что полный нуб в Lightning.
Жду интересных вопрос и не менее интересных ответов!!! :) 

camamber
Если параметры надо передавать при переходе на эту страницу, то только через параметры строки запроса.

Этот вариант. Наверно криво сформулировал. Пожуем. Заходишь, например в просмотр какого-либо Account. Жмешь кнопку Edit Layout. Все в Лайт интерфейсе. В окне билдера суешь свой кастомный компонент. Задача: при попадании на эту страницу выводить какие-либо данные в своем компоненте, в соответствии с параметрами, ему переданными. Параметры никак не зависят от объекта Account в нашем случае.

Спасибо Ирина за расширенный ответ. :)Эти способы известны. Как я понял, кроме разбора query string по другому никак.

мой вариант.
controller

({
doInit : function(cmp, evt, hlp) {
var ps = {};
var loc_search = decodeURIComponent(window.location.search.substring(1));
var vars = loc_search.split('&');
for (var i = 0; i < vars.length; i++) {
var p_name = vars[i].split('=');
ps[p_name[0]] = p_name[1] === undefined ? true : p_name[1];
};
cmp.set("v.params", ps);

}
})


получить значение
var ps = cmp.get("v.params");
var urlParam = ps['urlParam'];

компонента
<aura:attribute name="params" type="Map"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

Как-то так.

[quote="camamber"]Если параметры надо передавать при переходе на эту страницу, то только через параметры строки запроса.[/quote]
Этот вариант. Наверно криво сформулировал. Пожуем. Заходишь, например в просмотр какого-либо Account. Жмешь кнопку Edit Layout. Все в Лайт интерфейсе. В окне билдера суешь свой кастомный компонент. Задача: при попадании на эту страницу выводить какие-либо данные в своем компоненте, в соответствии с параметрами, ему переданными. Параметры никак не зависят от объекта Account в нашем случае.

Спасибо Ирина за расширенный ответ. :)Эти способы известны. Как я понял, кроме разбора query string по другому никак.

мой вариант.
controller
[code]
({
    doInit : function(cmp, evt, hlp) {
        var ps = {};        
        var loc_search = decodeURIComponent(window.location.search.substring(1));
	var vars = loc_search.split('&');
        for (var i = 0; i < vars.length; i++) {
            var p_name = vars[i].split('=');
			ps[p_name[0]] = p_name[1] === undefined ? true : p_name[1];
         };
        cmp.set("v.params", ps);

    }
})[/code]
получить значение
[code]
        var ps = cmp.get("v.params");
        var urlParam = ps['urlParam'];

[/code]
компонента
[code]
<aura:attribute name="params" type="Map"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
[/code]
Как-то так.

Спасибо,

очень красиво у Вас пост оформлен)

А с event - срабатывает?

Дано:
2 компонента:
С1: C_Main
С2: C_Detail
event: Е_DataPass


Е_DataPass:

<aura:event type="APPLICATION" description="" >
<aura:attribute name="eventattr" type="String" />
</aura:event>

С1:
*.cmp
<aura:registerEvent name="Е_DataPass" type="c:Е_DataPass"/>


*controller.js / *helper.js

var compEvent = cmp.getEvent("Е_DataPass");
compEvent.setParams({"eventattr" : x });
compEvent.fire();

C2: слушает изменение и обрабатывает данные:

*.cmp
<aura:handler event="c:Е_DataPass" action="{!c.handleDataPass}"/>


*controller.js / *helper.js
...
handleDataPass: function(cmp, e, h) {

var param = e.getParam('eventattr');//param = x
...
}
...

Возможно нужно поиграть с объявлением евент и компонентов.

Спасибо,

очень красиво у Вас пост оформлен)

А с event - срабатывает?

Дано:
2 компонента:
С1: C_Main
С2: C_Detail
event: Е_DataPass


Е_DataPass:
[code]<aura:event type="APPLICATION" description="" >
    <aura:attribute name="eventattr" type="String" />
</aura:event>
[/code]
С1:
[code]*.cmp
<aura:registerEvent name="Е_DataPass" type="c:Е_DataPass"/> 
[/code]


[code]
*controller.js / *helper.js

var compEvent = cmp.getEvent("Е_DataPass");
compEvent.setParams({"eventattr" : x });
compEvent.fire();[/code]

C2: слушает изменение и обрабатывает данные:
[code]*.cmp
<aura:handler event="c:Е_DataPass" action="{!c.handleDataPass}"/>
[/code]


[code]
*controller.js / *helper.js
...
handleDataPass: function(cmp, e, h) {
         
        var param = e.getParam('eventattr');//param = x
        ...
}
...
[/code]
Возможно нужно поиграть с объявлением евент и компонентов.


Я так понимаю ивенты используются для передачи параметров между компонентами в пределах одной страницы.

Я так понимаю ивенты используются для передачи параметров между компонентами в пределах одной страницы.

а что за параметры то надо передать со стандартной страницы в кастомную компоненту?

а что за параметры то надо передать со стандартной страницы в кастомную компоненту?

Maxim Elets
а что за параметры то надо передать со стандартной страницы в кастомную компоненту?

В моем случае базовые типы, не объекты и т.п.

[quote="Maxim Elets"]а что за параметры то надо передать со стандартной страницы в кастомную компоненту?[/quote]
В моем случае базовые типы, не объекты и т.п.

Вот есть еще такой вариант
https://releasenotes.docs.salesforce.com/en-us/summer18/release-notes/rn_lc_components_navigation.htm

Gives you control over whether a component can be opened programmatically, and which attributes can be dynamically set when the component is opened.

Сам не пробовал. Но запомнить, такой вариант, тоже будет полезно...

Вот есть еще такой вариант
https://releasenotes.docs.salesforce.com/en-us/summer18/release-notes/rn_lc_components_navigation.htm
[quote]Gives you control over whether a component can be opened programmatically, and which attributes can be dynamically set when the component is opened.[/quote]
Сам не пробовал. Но запомнить, такой вариант, тоже будет полезно...

Спасибо. Интересно.

Спасибо. Интересно.