Hey there,

I built a react component that generates the lightning icon markup.
This coponent need the resource path of the icon set.

Actually I hardcoded the resource path into my application. But thats not best practive due this path changes from release to release.

My question is, if there is a posibility to receive the actual icon resource path from lightning.

Cheers
Flo

Hey there,

I actually have a nasty problem with application events in my lightning component:

I build a react app that uses the FullCalendar plugin (it's locker service save!) to display a nice customizeable calendar.
In my header I want to use the default salesforce datepicker plugin to select the date which should be displayed by the calenendar.

Unfortunately the number of available application events is really rare!
After I debugged the inputDate component and read the Aura docs, I saw that there is an application event called ui:showDatePicker.

http://documentation.auraframework.org/auradocs#reference?descriptor=ui:showDatePicker&defType=event

This event is being fired every time the user clicks on the datepicker icon in the input field and the datepicker ui is shown.

Due this is an application event, it should be fireable by my component to display a datepicker inside my component.

So far....

I implemented the fire mechanism in my react app but every time I call
 

var event = $A.get('e.ui:showDatePicker');

event.setParams({
    element: targetElementPlaceholder
});

event.fire()

$A.get(.....) returns undefined.

Other events like force:showToast work as expected.

To go some bit deeper into this behaviour, I built an test component.
This component looks like:
 

<aura:component controller="ContactController" implements="flexipage:availableForAllPageTypes">
    <!-- onload handler -->
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>

    <span onclick="{!c.datepicker}">Test</span>

</aura:component>

JS controller:
 

({
	init : function(component, event, helper) {
        
        window.ReactComponent = {
            component : component
        }
       
        console.log('Datepicker 2');

        setTimeout(function(){


            console.log($A.get('e.ui:showDatePicker'));

        }, 4000);
        
    },

    datepicker : function(c,e,h){
        console.log($A.get('e.ui:showDatePicker'));

        var evt = $A.get('e.ui:showDatePicker');

        evt.setParams({
            element : c.getElement()
        });

        evt.fire();
    }
})

As you can see, there is an init handler and a click handler for the span element.
If everything should be ok, the console.log($A.get('e.ui:showDatePicker')) inside the init method should output the same object like the log in the datepicker method.

But it doesn't.

I used the timeout to ensue that there is no conflict of availability of $A registered events.
Removing the timeout would result in the same output.

The interesting thing now is, that when I click on the span element, the event gets fired correctly and the datepicker appears right after the span element.

Does anyone have an idea why $A returns undefined when calling it in the init method or from anywhere else but not a controller function?

Thanks in advance!

Cheers
Flo

Hey there,

i'm working on a lightning component that uses angularJS 1.6;

Has anyone experienced data binding issues between controllers and views?

I've got a list of things that are currently not working well:

Automatically bootstrapping
Having a angular-app like

angular.module('app', []);

and trying to instanciate angular through:

<div id="app-container" data-ng-app="app">
		<div data-ng-controller="appController">
			<div id="calendar"></div>
		</div>
    </div>

results in:

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

To fix it, I need to bootstrap angular manually. Seems to be an issue with loading the angular scripts. I have vendors.js and app.js being loaded this way:
 

<ltng:require scripts="{!join(',', $Resource.MyResource+ '/scripts/vendor.js', $Resource.MyResource+ '/scripts/app.js')}"/>

Angular databinding not working:

For example I have this controller:

angular
    .module('app')
    .controller('appController', function($scope, $log){
        $scope.hello = 'Hallo';
    })

And my view looks like:
 

<div data-ng-controller="appController">
   {{hello}}
</div>

The view should render the word 'Hallo'.
But it still remains in {{hello}}.

Another thing is, that the way angular provides including templates with data-ng-include and paths doesn't also work:
 

<div data-ng-include="'app/hello.html'"></div>

app/hello.html is stored in the angular template provider.

This results in following:

<!-- ngInclude: 'app/hello.html' -->

But the content of hello.html is never rendered in the DOM.


Does anyone has experienced similar behaviour or has some ides how to fix them?

Thanks in advance!

Regards
Flo



 

Hey there,

I tried to use to use the aura ui:modal component as it's described in the auradoc http://documentation.auraframework.org/auradocs#reference?descriptor=ui:modal&defType=component.

I included the panelManager2 component:
 

<ui:panelManager2 aura:id="pm">
    <aura:set attribute="registeredPanels">
        <ui:panel alias="panel"/>
        <ui:modal alias="modal"/>
    </aura:set>
  </ui:panelManager2>

createModal : function(component, event, helper){

        var
            body = $A.createComponent('aura:text', {value : 'TEST Content'}, function(a,b,c){}),
            footer = $A.createComponent('aura:text', {value : 'TEST Content'}, function(a,b,c){})
        ;

        $A.get('e.ui:createPanel').setParams({
            panelType   :'modal',
            visible: true,
            panelConfig : {
                title: 'Modal Header',
                body  : body,
                footer: footer
            },
            onCreate: function (panel) {
                //need this for event bubbling
                footer.setAttributeValueProvider(panel);
                console.log('createmodal ' + panel);
            }

        }).fire();
    }

Every time I call createModal, Lightning throws following error:
 

This page has an error. You might just need to refresh it.
Action failed: c:IssuePlacementsComponent$controller$createModal [Cannot read property 'setParams' of undefined]
Failing descriptor: {c:IssuePlacementsComponent$controller$createModal}

Seems like, 

$A.get('e.ui:createPanel')

fails...

Any ideas how to get this component working?

Thanks in advance and Cheers!

Flo

Hi there,

I'm working on react modules for lightning components.
Some of my modules uses the window.crypt api.

The fact that LockerService encapsulates every compontent to have their own window etc. it seems that there is something going wrong:

This is my test js controller code:

({
	init : function(component, event, helper) {
                
		 console.log(window.crypto.getRandomValues(new window.Uint8Array(16)));
        
    }
})

This will thorw the following error:

This page has an error. You might just need to refresh it.
Error during init [Action failed: c:reactTest$controller$init [Failed to execute 'getRandomValues' on 'Crypto': parameter 1 is not of type 'ArrayBufferView'.]]

The react component uses the code in a simliar way.

It seems that the Uint8Array loses the binding (however) to the ArrayBufferView interface that the first argument needs to implement.

Any ideas to solve this?

Thank in advance!
 

Hey there,

I actually have a nasty problem with application events in my lightning component:

I build a react app that uses the FullCalendar plugin (it's locker service save!) to display a nice customizeable calendar.
In my header I want to use the default salesforce datepicker plugin to select the date which should be displayed by the calenendar.

Unfortunately the number of available application events is really rare!
After I debugged the inputDate component and read the Aura docs, I saw that there is an application event called ui:showDatePicker.

http://documentation.auraframework.org/auradocs#reference?descriptor=ui:showDatePicker&defType=event

This event is being fired every time the user clicks on the datepicker icon in the input field and the datepicker ui is shown.

Due this is an application event, it should be fireable by my component to display a datepicker inside my component.

So far....

I implemented the fire mechanism in my react app but every time I call
 

var event = $A.get('e.ui:showDatePicker');

event.setParams({
    element: targetElementPlaceholder
});

event.fire()

$A.get(.....) returns undefined.

Other events like force:showToast work as expected.

To go some bit deeper into this behaviour, I built an test component.
This component looks like:
 

<aura:component controller="ContactController" implements="flexipage:availableForAllPageTypes">
    <!-- onload handler -->
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>

    <span onclick="{!c.datepicker}">Test</span>

</aura:component>

JS controller:
 

({
	init : function(component, event, helper) {
        
        window.ReactComponent = {
            component : component
        }
       
        console.log('Datepicker 2');

        setTimeout(function(){


            console.log($A.get('e.ui:showDatePicker'));

        }, 4000);
        
    },

    datepicker : function(c,e,h){
        console.log($A.get('e.ui:showDatePicker'));

        var evt = $A.get('e.ui:showDatePicker');

        evt.setParams({
            element : c.getElement()
        });

        evt.fire();
    }
})

As you can see, there is an init handler and a click handler for the span element.
If everything should be ok, the console.log($A.get('e.ui:showDatePicker')) inside the init method should output the same object like the log in the datepicker method.

But it doesn't.

I used the timeout to ensue that there is no conflict of availability of $A registered events.
Removing the timeout would result in the same output.

The interesting thing now is, that when I click on the span element, the event gets fired correctly and the datepicker appears right after the span element.

Does anyone have an idea why $A returns undefined when calling it in the init method or from anywhere else but not a controller function?

Thanks in advance!

Cheers
Flo

Hey there,

I tried to use to use the aura ui:modal component as it's described in the auradoc http://documentation.auraframework.org/auradocs#reference?descriptor=ui:modal&defType=component.

I included the panelManager2 component:
 

<ui:panelManager2 aura:id="pm">
    <aura:set attribute="registeredPanels">
        <ui:panel alias="panel"/>
        <ui:modal alias="modal"/>
    </aura:set>
  </ui:panelManager2>

createModal : function(component, event, helper){

        var
            body = $A.createComponent('aura:text', {value : 'TEST Content'}, function(a,b,c){}),
            footer = $A.createComponent('aura:text', {value : 'TEST Content'}, function(a,b,c){})
        ;

        $A.get('e.ui:createPanel').setParams({
            panelType   :'modal',
            visible: true,
            panelConfig : {
                title: 'Modal Header',
                body  : body,
                footer: footer
            },
            onCreate: function (panel) {
                //need this for event bubbling
                footer.setAttributeValueProvider(panel);
                console.log('createmodal ' + panel);
            }

        }).fire();
    }

Every time I call createModal, Lightning throws following error:
 

This page has an error. You might just need to refresh it.
Action failed: c:IssuePlacementsComponent$controller$createModal [Cannot read property 'setParams' of undefined]
Failing descriptor: {c:IssuePlacementsComponent$controller$createModal}

Seems like, 

$A.get('e.ui:createPanel')

fails...

Any ideas how to get this component working?

Thanks in advance and Cheers!

Flo

Hi there,

I'm working on react modules for lightning components.
Some of my modules uses the window.crypt api.

The fact that LockerService encapsulates every compontent to have their own window etc. it seems that there is something going wrong:

This is my test js controller code:

({
	init : function(component, event, helper) {
                
		 console.log(window.crypto.getRandomValues(new window.Uint8Array(16)));
        
    }
})

This will thorw the following error:

This page has an error. You might just need to refresh it.
Error during init [Action failed: c:reactTest$controller$init [Failed to execute 'getRandomValues' on 'Crypto': parameter 1 is not of type 'ArrayBufferView'.]]

The react component uses the code in a simliar way.

It seems that the Uint8Array loses the binding (however) to the ArrayBufferView interface that the first argument needs to implement.

Any ideas to solve this?

Thank in advance!
 

I am trying to build a CTI adapter. But I keep getting the error: "Failed to construct 'WebSocket': Please use the 'new' operator, this DOM object constructor cannot be called as a function.". Is this a know limitation?

I'm using $A.get('e.force:editRecord') to display standard lightning edit modal window. I want to refresh my component after user saves the given record. However there are no callback events documented by salesforce on record save success for e.force:editRecord.

By using chrome lighting inspector tool I found two events getting fired when I clicked on Save button.
1. force:recordChange (Application Event)
2. force:save (Component Event)

I declared an application event handler for force:recordChange
<aura:handler event="force:recordChange" action="{!c.handleRecordChange}"/>

Got following error
[ERROR]: No EVENT named recordChange found: Source

To handle component event force:save I have to specify event name
<aura:handler name="?" event="force:save" action="{!c.handleRecordSave}"/>

How do I notify custom component when user saves the record.