function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jay reddyJay reddy 

Custom pop up box in lightning

Heya Mates!

I have requirement where I have to replicate a javascript button for Lightning version. As we know, we cannot have Javascript button in Lightning. I'd like to have the same button in Lightning version. Below is the Javascript code for the button in Classic version.

Any help is appreciated!

Many Thanks!
GR 
{!REQUIRESCRIPT('//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')} 
{!REQUIRESCRIPT('//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js')} 
try{ 
jQuery(function() { 
/*Append the jQuery CSS CDN Link to the Head tag.*/ 
jQuery('head').append('<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.css" type="text/css" />'); 

/*Create the HTML(DIV Tag) for the Dialog.*/ 
var html = 
'<div id="dialog" title="Questionnaire"><p>Please ask for Contact Birthdate</p><p>Please ask for Contact Email address</p><p>Please ask for Contact Phone Number</p></div>'; 

/*Check if the Dialog(DIV Tag) already exists if not then Append the same to the Body tag.*/ 
if(!jQuery('[id=dialog]').size()){ 
jQuery('body').append(html); 
} 

/*Open the jQuery Dialog.*/ 
jQuery( "#dialog" ).dialog({ 
autoOpen: true, 
modal: true, 
show: { 
effect: "bounce", 
duration: 1000 
}, 
hide: { 
effect: "bounce", 
duration: 1000 
}, 
buttons: { 
"Continue": function() { 
location.replace('/home/home.jsp'); 
jQuery( this ).dialog( "close" ); 
}, 
Cancel: function() { 
jQuery( this ).dialog( "close" ); 
} 
} 
}); 
}); 
} 
catch(e){ 
alert('An Error has Occured. Error: ' + e); 
}

 
sfdcMonkey.comsfdcMonkey.com
Hi Girish, Yes classic javaScript buttons not supported in lightning,  to move this funcationlty in lightning you have need to create a custom lightning component and use that component as a Action Button in lightning record detail page. :
check out this post : http://sfdcmonkey.com/2017/04/16/add-lightning-component-lightning-action/
so by default when you click on Custom Action Button in lightning it will be open a default popup (it can be with or without header and footer), and in this default popup your custom lightning component will be shown.
 
   next you have need to add a basic button for Continue in lightning component code and onclick on this button you can navigate your lightning component to desired URL

i.e : 
<aura:component implements="force:lightningQuickAction"> 
   <lightning:button variant="brand" label="Continue" onclick="{! c.gotoURL }" />
</aura:component>
gotoURL : function (component, event, helper) {
    var urlEvent = $A.get("e.force:navigateToURL");
    urlEvent.setParams({
      "url": "/006/o"
    });
    urlEvent.fire();
}

Thanks, let us know if it helps you