JQuery UI dialogs for standard pages JQuery

shornasarker117

UI Do you use custom buttons on standard pages and want to display a dialog before executing a function? Then JQuery UI is the solution. JQuery UI offers these advantages JQuery UI offers you the option of creating a modal via JavaScript and embedding a Visualforce page in it, for example to process user input or to output warning or error messages from JavaScript. By default, JavaScript only offers the option of displaying a simple message to the user using the alert() function. However, if we're honest, alert() messages don't look very attractive and different display for alert and success messages is not possible. Below I will explain to you in four short steps how you can create an attractive dialog for JavaScript buttons.

Our e-book on Salesforce development E-Book: Salesforce Development  Indonesia WhatsApp Number List Choosing the right development environment, deadly sins of Salesforce development and much more. Example: Account archiving scenario For many Salesforce customers, accounts are not deleted, but simply archived so as not to lose historical data. For this purpose, the Boolean field “isArchived” is used on the account. So that archiving is as easy for the user as the standard deletion of a record, there should be a custom button for archiving on the account object. Up to this point, the requirement can be represented with a simple custom button. In our example, however, the user must provide a reason for each archiving.



This requirement makes the implementation significantly more complex, as it is not easily possible to extend a JavaScript button to an input dialog. For this example I will use a total of four components. A JavaScript file that is saved as a static resource. A custom JavaScript button. An APEX class. A Visualforce Page. 1. Create a JavaScript file as a static resource The JavaScript file is used to define the JQuery UI modal. ated the JavaScript file, save it as a static resource in Salesforce under the name archiveAccountJS. 2. Create an Apex Controller Next, an APEX class is created, which is used to map the logic of the Visualforce page.