lightening aura components: Create Wider Modal Pop Up In Lightning Experience record view in Salesforce

** Solution is tried out in Salesforce Developer Edition**

Challenge: Quick action in Lightning Experience will show up a fixed width modal pop up.

Solution: Flexi page lightning component & Lightning record page layout.

Flexi page component & Controller:

- PD_FlexiPage_LightningPopUpModal_Button.cmp
- PD_FlexiPage_LightningPopUpModal_Button.js

Lightning record page setup:

• - Go to Lightning Experience setup
• - Navigate to Object manager
• - Click on Account (you can find it from search available at the top right corner)
• - Open the "Lightning Record Pages" link from side bar for the Acount
• - If not created, click on NEW (Available in the top right corner)
• - System will ask for the type of page
• - Select Record Page & hit Next
• - Fill in Label and Object details & hit Next
• - Observe two tabs and go to second one if you dont want to customize everything
• - Finally click Finish button.
• - IF available, then got to Edit page.
• - Left side bar, search for flexi component which is created.
• - Drag the search resulting component to the record layout
• - Click on save
• - You have to Activate & Assign the page accordingly

Lightning Record page edit screen where component is being searched

Component is dragged to the layout

Working screen print:

Record view from developer edition salesforce org, showing the button created by flexi component

flexi component is coded to show search page inside the pop-up

Code snippets:

	<aura:component implements="flexipage:availableForAllPageTypes">
	<ui:button label="lightning-fexi-component-button" press="{!c.openmodal}" />
	<div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox" class="slds-modal slds-modal_large">
	<div class="slds-modal__container" style="width: 95%;">
	<div class="slds-modal__header">
	</div>
	<div class="slds-modal__content slds-p-around--medium">
	<div>
	<c:training_component /> <!-- Some Content for the Modal pop -->
	</div>
	</div>
	<div class="slds-modal__footer">
	<ui:button label="close" press="{!c.closeModal}" />
	</div>
	</div>
	</div>
	<div class="slds-backdrop " aura:id="Modalbackdrop"></div>
	</aura:component>

view raw PD_FlexiPage_LightningPopUpModal_Button.cmp hosted with ❤ by GitHub

	({
	closeModal:function(component,event,helper){
	var cmpTarget = component.find('Modalbox');
	var cmpBack = component.find('Modalbackdrop');
	$A.util.removeClass(cmpBack,'slds-backdrop--open');
	$A.util.removeClass(cmpTarget, 'slds-fade-in-open');
	},
	openmodal: function(component,event,helper) {
	var cmpTarget = component.find('Modalbox');
	var cmpBack = component.find('Modalbackdrop');
	$A.util.addClass(cmpTarget, 'slds-fade-in-open');
	$A.util.addClass(cmpBack, 'slds-backdrop--open');
	}
	})

view raw PD_FlexiPage_LightningPopUpModal_Button.js hosted with ❤ by GitHub