Hi there.

In my lightning app I have a few components:

• one component has a ui:inputSelect and registers an event. the ui:inputSelect has a change attribute that fires a function, wherein the selected text (an ID) is put in an event and fired.
• one component that handles the event, is an aura:iteration list of a component that, on handling the event, should retrieve a list of items where a master-child lookup is the sent ID of the master object. This then displays all those child objects.
• the other component that handles the event, has three inputText fields, that are supposed to display the other fields of the master object

The problem: either the event seems to not be fired, or the handlers seem to not be activated.

I put console.debug's, alerts and component.set("v.testmessage", "fired") 's in the handlers but they never execute.
I then put one of the handlers as the init-handler and then it did execute the handler (with an undefined ID since the event hadn't yet been fired, which is reasonable).

I have triple-checked the event name, event type and handler action, everything matches. I have no compilation problems, I have no errors when I am using my app. 
I also have no response whatsoever from my event. Any ideas?

**Registering component**

<aura:component controller="PrefixMasterHeaderSelectorController">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:registerEvent name="updateMaster" type="c:PrefixMasterEvent" />
    <aura:attribute name="masters" type="PrefixMaster__c[]"/>
      
    <label class="slds-master-element__label" for="masterSelector">Select a master to work with:</label>
    <div class="slds-master-element__control">
        <div class="slds-select_container">
            
            <ui:inputSelect aura:id="masterID" class="slds-select" change="{!c.masterHasChanged}">
                <aura:iteration items="{!v.masters}" var="master">
                    <ui:inputSelectOption text="{!master.Id}" label="{!master.Name}" />
                    <!-- + ' (Last modified: ' + master.LastModifiedDate + ' by ' + master.LastModifiedBy.Name + ')'}"/> -->
                </aura:iteration>	
                <ui:inputSelectOption text="newMaster" label="Create a new master" />
            </ui:inputSelect>
            
        </div>
    </div>

    <c:PrefixMasterHeaderMaster />
</aura:component>

**Registering controller**

({
    doInit : function(component, event, helper) {
        // Create the action
        var action = component.get("c.getMasters");
    
        // Add callback behavior for when response is received
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.masters", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
    
        // Send action off to be executed
        $A.enqueueAction(action);
    },
    
    masterHasChanged : function(component, event, helper) {
        var masterID = component.find("masterID").get("v.value");
        var masterEvent = component.getEvent("updateMaster");
        masterEvent.setParams({"master" : masterID})
        masterEvent.fire();
        
		console.debug('UPDATE MASTER = ' + masterID);
        alert('Hiya! masterEvent ' + masterEvent.getParam("master"));
    }
		
})

**List-child component**

<aura:component controller="PrefixListChildsController">
	<aura:handler name="updateForm" event="c:PrefixFormEvent" action="{!c.loadChilds}" />
    <aura:attribute name="childs" type="PrefixChild__c[]"/>
    
	<!--   	<aura:handler name="saveChild" event="c:PrefixChildEvent" action="{!c.handleAddItem}"/> -->
    <!--	to reload the masters after adding a new child -->
    
    <div>
        <header class="slds-p-top--small">
            <h3 class="slds-text-heading--small">Childs</h3>
        </header>
        
        <div id="list" class="row">
            <aura:iteration items="{!v.childs}" var="child">
                <aura:if isTrue="{!child.Order__c % 2 == 1}">
                        <div class="slds-p-around--small" style="background-color: lightblue; border-radius: 10px">
                            <c:PrefixChild child="{!child}"/>
                        </div>
                    <aura:set attribute="else" >
                        <div class="slds-p-around--small" style="background-color: none; border-radius: 10px">
                            <c:PrefixChild child="{!child}"/>
                        </div>
                    </aura:set>
                </aura:if>
            </aura:iteration>
            {!v.testEventmessage}
            <c:PrefixNewChild />
        </div>
    </div>

</aura:component>

**List-child controller.js**

({
	loadChilds : function(component, event, helper) {
 	    var action = component.get("c.getChilds");
		var masterID = event.getParam("master");    
    	action.setParams({ "masterID" : masterID });
        
        console.debug('master id = ' + masterID);
        alert('load childs ' + masterID);
        component.set("v.testEventmessage", masterID);

        // Add callback behavior for when response is received
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.childs", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
        
        // Send action off to be executed
        $A.enqueueAction(action);
    }
})

 

Hi there,

I am trying to create two popup windows. One contains an html page (dynamically created) as preview. The other is the bare html code, shown when the user wants to export the page.

The problem with the javascript popup window:

var mywindow = window.open("", "_blank" /* the rest of the arguments go here*/ );
mywindow.document.write("<p>some text</p>");
mywindow.close();

The problem with the above code is that it crashes on the second line, saying it doesn't know document.write.
If I comment out the second line, I see a window appearing very briefly before correctly dissapearing again.

The problem with modals, is that I simply cannot get them to work.
I can get them to apear (on init, not usefull either), but I cannot get them to hide either on clicking a button or on init.
(No code supplied because tried so many variations I don't know where to start, I guess if I had to choose the SLDS website's example).

Any advice on how to solve either problem?
(If I can solve both tasks with one type of popup I'm absolutely fine with using one method only.)

Thanks!

Hi there,

I am trying to create buttons, but instead of text (multiple language support) I would like to use icons.
For now: I would like these:
 - up
 - down
 - edit
 - delete

I have two questions:
 - Where can I find the icons SLDS provides? (i.e. a list of all icons)
 - How do I execute a function when someone clicks a button(icon) ?

Thanks in advance! 

Hi there.

In my lightning app I have a few components:

• one component has a ui:inputSelect and registers an event. the ui:inputSelect has a change attribute that fires a function, wherein the selected text (an ID) is put in an event and fired.
• one component that handles the event, is an aura:iteration list of a component that, on handling the event, should retrieve a list of items where a master-child lookup is the sent ID of the master object. This then displays all those child objects.
• the other component that handles the event, has three inputText fields, that are supposed to display the other fields of the master object

The problem: either the event seems to not be fired, or the handlers seem to not be activated.

I put console.debug's, alerts and component.set("v.testmessage", "fired") 's in the handlers but they never execute.
I then put one of the handlers as the init-handler and then it did execute the handler (with an undefined ID since the event hadn't yet been fired, which is reasonable).

I have triple-checked the event name, event type and handler action, everything matches. I have no compilation problems, I have no errors when I am using my app. 
I also have no response whatsoever from my event. Any ideas?

**Registering component**

<aura:component controller="PrefixMasterHeaderSelectorController">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:registerEvent name="updateMaster" type="c:PrefixMasterEvent" />
    <aura:attribute name="masters" type="PrefixMaster__c[]"/>
      
    <label class="slds-master-element__label" for="masterSelector">Select a master to work with:</label>
    <div class="slds-master-element__control">
        <div class="slds-select_container">
            
            <ui:inputSelect aura:id="masterID" class="slds-select" change="{!c.masterHasChanged}">
                <aura:iteration items="{!v.masters}" var="master">
                    <ui:inputSelectOption text="{!master.Id}" label="{!master.Name}" />
                    <!-- + ' (Last modified: ' + master.LastModifiedDate + ' by ' + master.LastModifiedBy.Name + ')'}"/> -->
                </aura:iteration>	
                <ui:inputSelectOption text="newMaster" label="Create a new master" />
            </ui:inputSelect>
            
        </div>
    </div>

    <c:PrefixMasterHeaderMaster />
</aura:component>

**Registering controller**

({
    doInit : function(component, event, helper) {
        // Create the action
        var action = component.get("c.getMasters");
    
        // Add callback behavior for when response is received
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.masters", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
    
        // Send action off to be executed
        $A.enqueueAction(action);
    },
    
    masterHasChanged : function(component, event, helper) {
        var masterID = component.find("masterID").get("v.value");
        var masterEvent = component.getEvent("updateMaster");
        masterEvent.setParams({"master" : masterID})
        masterEvent.fire();
        
		console.debug('UPDATE MASTER = ' + masterID);
        alert('Hiya! masterEvent ' + masterEvent.getParam("master"));
    }
		
})

**List-child component**

<aura:component controller="PrefixListChildsController">
	<aura:handler name="updateForm" event="c:PrefixFormEvent" action="{!c.loadChilds}" />
    <aura:attribute name="childs" type="PrefixChild__c[]"/>
    
	<!--   	<aura:handler name="saveChild" event="c:PrefixChildEvent" action="{!c.handleAddItem}"/> -->
    <!--	to reload the masters after adding a new child -->
    
    <div>
        <header class="slds-p-top--small">
            <h3 class="slds-text-heading--small">Childs</h3>
        </header>
        
        <div id="list" class="row">
            <aura:iteration items="{!v.childs}" var="child">
                <aura:if isTrue="{!child.Order__c % 2 == 1}">
                        <div class="slds-p-around--small" style="background-color: lightblue; border-radius: 10px">
                            <c:PrefixChild child="{!child}"/>
                        </div>
                    <aura:set attribute="else" >
                        <div class="slds-p-around--small" style="background-color: none; border-radius: 10px">
                            <c:PrefixChild child="{!child}"/>
                        </div>
                    </aura:set>
                </aura:if>
            </aura:iteration>
            {!v.testEventmessage}
            <c:PrefixNewChild />
        </div>
    </div>

</aura:component>

**List-child controller.js**

({
	loadChilds : function(component, event, helper) {
 	    var action = component.get("c.getChilds");
		var masterID = event.getParam("master");    
    	action.setParams({ "masterID" : masterID });
        
        console.debug('master id = ' + masterID);
        alert('load childs ' + masterID);
        component.set("v.testEventmessage", masterID);

        // Add callback behavior for when response is received
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.childs", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
        
        // Send action off to be executed
        $A.enqueueAction(action);
    }
})

 

Hi there.

In my lightning app I have a few components:

• one component has a ui:inputSelect and registers an event. the ui:inputSelect has a change attribute that fires a function, wherein the selected text (an ID) is put in an event and fired.
• one component that handles the event, is an aura:iteration list of a component that, on handling the event, should retrieve a list of items where a master-child lookup is the sent ID of the master object. This then displays all those child objects.
• the other component that handles the event, has three inputText fields, that are supposed to display the other fields of the master object

The problem: either the event seems to not be fired, or the handlers seem to not be activated.

I put console.debug's, alerts and component.set("v.testmessage", "fired") 's in the handlers but they never execute.
I then put one of the handlers as the init-handler and then it did execute the handler (with an undefined ID since the event hadn't yet been fired, which is reasonable).

I have triple-checked the event name, event type and handler action, everything matches. I have no compilation problems, I have no errors when I am using my app. 
I also have no response whatsoever from my event. Any ideas?

**Registering component**

<aura:component controller="PrefixMasterHeaderSelectorController">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:registerEvent name="updateMaster" type="c:PrefixMasterEvent" />
    <aura:attribute name="masters" type="PrefixMaster__c[]"/>
      
    <label class="slds-master-element__label" for="masterSelector">Select a master to work with:</label>
    <div class="slds-master-element__control">
        <div class="slds-select_container">
            
            <ui:inputSelect aura:id="masterID" class="slds-select" change="{!c.masterHasChanged}">
                <aura:iteration items="{!v.masters}" var="master">
                    <ui:inputSelectOption text="{!master.Id}" label="{!master.Name}" />
                    <!-- + ' (Last modified: ' + master.LastModifiedDate + ' by ' + master.LastModifiedBy.Name + ')'}"/> -->
                </aura:iteration>	
                <ui:inputSelectOption text="newMaster" label="Create a new master" />
            </ui:inputSelect>
            
        </div>
    </div>

    <c:PrefixMasterHeaderMaster />
</aura:component>

**Registering controller**

({
    doInit : function(component, event, helper) {
        // Create the action
        var action = component.get("c.getMasters");
    
        // Add callback behavior for when response is received
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.masters", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
    
        // Send action off to be executed
        $A.enqueueAction(action);
    },
    
    masterHasChanged : function(component, event, helper) {
        var masterID = component.find("masterID").get("v.value");
        var masterEvent = component.getEvent("updateMaster");
        masterEvent.setParams({"master" : masterID})
        masterEvent.fire();
        
		console.debug('UPDATE MASTER = ' + masterID);
        alert('Hiya! masterEvent ' + masterEvent.getParam("master"));
    }
		
})

**List-child component**

<aura:component controller="PrefixListChildsController">
	<aura:handler name="updateForm" event="c:PrefixFormEvent" action="{!c.loadChilds}" />
    <aura:attribute name="childs" type="PrefixChild__c[]"/>
    
	<!--   	<aura:handler name="saveChild" event="c:PrefixChildEvent" action="{!c.handleAddItem}"/> -->
    <!--	to reload the masters after adding a new child -->
    
    <div>
        <header class="slds-p-top--small">
            <h3 class="slds-text-heading--small">Childs</h3>
        </header>
        
        <div id="list" class="row">
            <aura:iteration items="{!v.childs}" var="child">
                <aura:if isTrue="{!child.Order__c % 2 == 1}">
                        <div class="slds-p-around--small" style="background-color: lightblue; border-radius: 10px">
                            <c:PrefixChild child="{!child}"/>
                        </div>
                    <aura:set attribute="else" >
                        <div class="slds-p-around--small" style="background-color: none; border-radius: 10px">
                            <c:PrefixChild child="{!child}"/>
                        </div>
                    </aura:set>
                </aura:if>
            </aura:iteration>
            {!v.testEventmessage}
            <c:PrefixNewChild />
        </div>
    </div>

</aura:component>

**List-child controller.js**

({
	loadChilds : function(component, event, helper) {
 	    var action = component.get("c.getChilds");
		var masterID = event.getParam("master");    
    	action.setParams({ "masterID" : masterID });
        
        console.debug('master id = ' + masterID);
        alert('load childs ' + masterID);
        component.set("v.testEventmessage", masterID);

        // Add callback behavior for when response is received
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.childs", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
        
        // Send action off to be executed
        $A.enqueueAction(action);
    }
})

 

Hi there,

I am trying to create two popup windows. One contains an html page (dynamically created) as preview. The other is the bare html code, shown when the user wants to export the page.

The problem with the javascript popup window:

var mywindow = window.open("", "_blank" /* the rest of the arguments go here*/ );
mywindow.document.write("<p>some text</p>");
mywindow.close();

The problem with the above code is that it crashes on the second line, saying it doesn't know document.write.
If I comment out the second line, I see a window appearing very briefly before correctly dissapearing again.

The problem with modals, is that I simply cannot get them to work.
I can get them to apear (on init, not usefull either), but I cannot get them to hide either on clicking a button or on init.
(No code supplied because tried so many variations I don't know where to start, I guess if I had to choose the SLDS website's example).

Any advice on how to solve either problem?
(If I can solve both tasks with one type of popup I'm absolutely fine with using one method only.)

Thanks!

Hi there,

I am trying to create buttons, but instead of text (multiple language support) I would like to use icons.
For now: I would like these:
 - up
 - down
 - edit
 - delete

I have two questions:
 - Where can I find the icons SLDS provides? (i.e. a list of all icons)
 - How do I execute a function when someone clicks a button(icon) ?

Thanks in advance! 

How to retake trailhead challenge? I did it few months ago and now I would like to review the topic and redo the challenges. It's not allowing me to retake or displaying answers since I already completed it.

I see only delete - no edit. Is this not possible or hidden somehow?