Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Mahin AbbasipourMahin Abbasipour 

modal pop up

Hello,

I just started learning. Sorry if my question is very basic but I was not able to find the answer to it.
I am trying to create a button that when clicked, a modal pops up with two buttons that each will create a separate message on the first page.
So far I created a new lightening component and I was able to create the button, but the thing is that I don't know how I can debug/run it so that I can see the button.
I went through multiple videos but I cuoldn't figure it out. I appreciate if someone can give me a clue.

Thanks! 
 
Best Answer chosen by Mahin Abbasipour
Manish ChoudhariManish Choudhari
Hi Mahin,

You can either create a Standalone Lightning App to display your lightning component OR you can add the component in a Lightning Tab or Lightning App Builder Page.

Please watch my youtube videos which cover Ligthning from Basic to Advance Level. Playlist link here: https://www.youtube.com/playlist?list=PLQXsHnNZgiNe35JsuHAb-PsDmD4kwEIsg


For Lightning App Builder Page: https://www.youtube.com/watch?v=FrnmcH0Lrkw&index=2&list=PLQXsHnNZgiNe35JsuHAb-PsDmD4kwEIsg&t=5s 
For Standalone Lighnting App: https://www.youtube.com/watch?v=o9bcR3sZBcQ&index=3&list=PLQXsHnNZgiNe35JsuHAb-PsDmD4kwEIsg&t=151s


Let me know if this helps.


**Please mark this as best answer if this answers your query.**
Thanks,
Manish Choudhari
14x Certified Salesforce Architect
Certification link: http://certification.salesforce.com/certification-detail-print?conId=003G000002gRrrEIAS​
My Blog: http://sfdcfacts.com/
Youtube Channel: https://www.youtube.com/SFDCFacts
LinkedIn: https://www.linkedin.com/in/manish-choudhary/
Trailhead: https://trailhead.salesforce.com/en/me/manish-choudhari
Twitter: https://mobile.twitter.com/manish_sfdc

All Answers

Manish ChoudhariManish Choudhari
Hi Mahin,

You can either create a Standalone Lightning App to display your lightning component OR you can add the component in a Lightning Tab or Lightning App Builder Page.

Please watch my youtube videos which cover Ligthning from Basic to Advance Level. Playlist link here: https://www.youtube.com/playlist?list=PLQXsHnNZgiNe35JsuHAb-PsDmD4kwEIsg


For Lightning App Builder Page: https://www.youtube.com/watch?v=FrnmcH0Lrkw&index=2&list=PLQXsHnNZgiNe35JsuHAb-PsDmD4kwEIsg&t=5s 
For Standalone Lighnting App: https://www.youtube.com/watch?v=o9bcR3sZBcQ&index=3&list=PLQXsHnNZgiNe35JsuHAb-PsDmD4kwEIsg&t=151s


Let me know if this helps.


**Please mark this as best answer if this answers your query.**
Thanks,
Manish Choudhari
14x Certified Salesforce Architect
Certification link: http://certification.salesforce.com/certification-detail-print?conId=003G000002gRrrEIAS​
My Blog: http://sfdcfacts.com/
Youtube Channel: https://www.youtube.com/SFDCFacts
LinkedIn: https://www.linkedin.com/in/manish-choudhary/
Trailhead: https://trailhead.salesforce.com/en/me/manish-choudhari
Twitter: https://mobile.twitter.com/manish_sfdc
This was selected as the best answer
Mahin AbbasipourMahin Abbasipour
Hello

I followed your video. I created a button and a controller which indicates when this button is pressed, a message as alert should be shown. When I click the button, nothing happens, just like your video, while it should show the message. Do I miss something? The video is Day3, at 56:50 https://www.youtube.com/watch?v=4nopmnLpqo4&list=PLQXsHnNZgiNe35JsuHAb-PsDmD4kwEIsg&index=4&t=0s
Kris KrisKris Kris
Hello. You can either create a Standalone Lightning App
Manish ChoudhariManish Choudhari
Hi Mahin,

Can you please share your component and controller code here? I should be able to help you after that.
Mahin AbbasipourMahin Abbasipour
Hi Manish,

Thank you for your reply.
I tried to do something with modal pop-ups similar to one of the answers but with small changes: (link: http://sfdcmonkey.com/2017/04/15/modal-box-lightning-component-salesforce/)

Therefore, in the lightening component code I have:

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
  <aura:attribute name="isOpen" type="boolean" default="false"/>
  <aura:attribute name="message" type="string" default="null"/>
  <div class="slds-m-around--xx-large">
    <button onclick="{!c.openModal}">click me</button>  
    
    <aura:if isTrue="{!v.isOpen}">
        <div role="dialog" tabindex="-1" aria-labelledby="header99" class="slds-modal slds-fade-in-open ">
            <div class="slds-modal__container">
                <!-- ###### MODAL BOX HEADER Part Start From Here ######-->
                <div class="slds-modal__header">
                    <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeModal}">
            
                    <span class="slds-assistive-text">Close</span>
                    </button>
                    <h2 id="header99" class="slds-text-heading--medium">
                    <p> My current Mindset</p>
                    <p>this is my cool assignment</p>
                    </h2>
                  </div>
                <!--###### MODAL BOX BODY Part Start From Here ######-->
                  <div class="slds-modal__content slds-p-around--medium">
                    <p>I am so excited to learn lighting</p>
                </div>
                <!--###### MODAL BOX FOOTER Part Start From Here ######-->
                  <div class="slds-modal__footer">
                    <button class="slds-button slds-button--neutral" onclick="{!c.closeModal}" >Cancel</button>
                    <button class="slds-button slds-button--brand" onclick="{!c.confirmModal}">Cofirm</button>
                  </div>
            </div>
        </div>
     </aura:if>
    </div>
</aura:component>

In the controler, I want to have a message (not an alert) on the first page. Therefore, I have :

({
    openModal : function(component, event, helper) {
      component.set("v.isOpen", true);
    },
    closeModal : function(component, event, helper) {
      component.set("v.isOpen", false);
      component.set("message", "you clicked the Cancel button")
   },
 
   confirmModal : function(component, event, helper) {
      component.set("v.isOpen", false);
      component.set("message", "you clicked the Confirm button");
   }
})

I have the attached picture of the page lightning appwhich when I click nothing happens even if I referesh the page. 

Thanks for your time.

Best regards,
Mahin
Manish ChoudhariManish Choudhari
Hi Mahin,

I have two changes in your code:
1. Inside closeModal function you need to use "v.message" instead of "message"
component.set("v.message", "you clicked the Cancel button")
2. Similarly, change the same line in confirmModal function as well
component.set("v.message", "you clicked the Confirm button");

Complete code:
  
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="isOpen" type="boolean" default="false"/>
    <aura:attribute name="message" type="string" default="null"/>
    <div class="slds-m-around--xx-large">
        <button onclick="{!c.openModal}">click me</button>  
        
        <aura:if isTrue="{!v.isOpen}">
            <div role="dialog" tabindex="-1" aria-labelledby="header99" class="slds-modal slds-fade-in-open ">
                <div class="slds-modal__container">
                    <!-- ###### MODAL BOX HEADER Part Start From Here ######-->
                    <div class="slds-modal__header">
                        <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeModal}">
                            
                            <span class="slds-assistive-text">Close</span>
                        </button>
                        <h2 id="header99" class="slds-text-heading--medium">
                            <p> My current Mindset</p>
                            <p>this is my cool assignment</p>
                        </h2>
                    </div>
                    <!--###### MODAL BOX BODY Part Start From Here ######-->
                    <div class="slds-modal__content slds-p-around--medium">
                        <p>I am so excited to learn lighting</p>
                    </div>
                    <!--###### MODAL BOX FOOTER Part Start From Here ######-->
                    <div class="slds-modal__footer">
                        <button class="slds-button slds-button--neutral" onclick="{!c.closeModal}" >Cancel</button>
                        <button class="slds-button slds-button--brand" onclick="{!c.confirmModal}">Cofirm</button>
                    </div>
                </div>
            </div>
        </aura:if>
    </div>
</aura:component>

Controller: 
({
    openModal : function(component, event, helper) {
        component.set("v.isOpen", true);
    },
    closeModal : function(component, event, helper) {
        component.set("v.isOpen", false);
        component.set("v.message", "you clicked the Cancel button")
        alert("you clicked the Cancel button");
    },
    
    confirmModal : function(component, event, helper) {
        component.set("v.isOpen", false);
        component.set("v.message", "you clicked the Confirm button");
        alert("you clicked the Confirm button");
    }
})

I have also included alert boxes in your code. 

Note: Please activate your page by clicking on "Save" and then "Activation" button in the lightning page. Without doing this, you cannot test the code. You can also test your code using standalone lightning application.

Let me know if this helps.


**Please mark this as best answer if this answers your query.**
Thanks,
Manish Choudhari
14x Certified Salesforce Architect
Certification link: http://certification.salesforce.com/certification-detail-print?conId=003G000002gRrrEIAS
My Blog: http://sfdcfacts.com/
Youtube Channel: https://www.youtube.com/SFDCFacts
LinkedIn: https://www.linkedin.com/in/manish-choudhary/
Trailhead: https://trailhead.salesforce.com/en/me/manish-choudhari
Twitter: https://mobile.twitter.com/manish_sfdc
Mahin AbbasipourMahin Abbasipour
Thanks a lot Manish. I guess there is a mistake that I am doing and I cannot see that. I did the save and activation, but still the same. Thanks any ways, I learned a lot from your videos.

Best,
Mahin