Salesforce Certified Platform App Builder – 6 – User Interface Part 2

4. Working with Buttons in the Page Layout

Okay, so now it’s time for us to work with buttons in the page layout. And so where we previously left off, we were in the Page Layout editor, and I click on this buttons link here on the left that shows the various standard and custom buttons that are available on whatever object you’re working on. And right now, I’m in the account support layout. And so this is a page layout for the account object. So we have various buttons available to us which can be dragged and drop down below. What you can do as well is you can click on one of these grade out buttons to show where it is in the page layout. So at the Account Details section of the Page Layout editor, let me scroll down a little bit. You have these various buttons available to you. And so if you want to, you could click and drag some of these to hide them. You could click and drag to add other buttons as well.

And there are certain other variables that control when these buttons display or not that goes beyond the scope of this particular lecture. But for now, the main things to keep in mind is that you can drag and drop and you can also click on to see where the buttons are in the layout. You can also perform searches to narrow down the search for matching results so you can find the button that you’re looking for. So I’m going to go ahead and save this and I’m going to show you how to add additional buttons to your Salesforce instance. So let’s click Save to save this page layout.

And so we’re back to our Abbott Insurance page here. And so I want to go back and show you how to get to where you can add additional buttons or as far as creating buttons. So let’s click on View Object to go to the setup menu. And we’re on the Accounts object that takes you to the main landing page for Accounts. And then what we’re wanting to find is this link called Buttons, Links and Actions. Now, each standard object under this customized menu here in Salesforce Classic will have a Buttons, Links, and Actions link in the Setup menu. So on the Accounts, for instance, if I click on that, that’ll bring up the Buttons, Links and Actions for the Account object. Other objects, like I mentioned, will have this as well, such as Leads has Buttons, Links, and Actions as well.

One thing to note is that these buttons and Links and Actions are object specific when it comes to the standard objects in Salesforce. And we will be getting into Actions and custom links as well in later lectures. One thing to bear in mind is that with Lightning Experience, salesforce is moving away from custom buttons and more towards Actions instead. And Lighting Experience does not support JavaScript in custom buttons, for example. And so you may have some old functionality in your old Salesforce instance and you’ll need to learn Actions in order to convert that over to be Lightning friendly. So let’s go to the Contacts Standard object and let’s go ahead and create a custom button for a contact record and add that to the page layout for the contact page layout. So if we go to Buttons, Links and Actions screen for the contact object and click on New button or link and then let’s say that we want to perform a Google search on the name of whoever the contact record is. And so I’m going to name or label this button Google Search, then tab over to fill in the API name.

And then I want to create a detailed page button. You can click on the view example here to be reminded of what this looks like. And this will be a button that we can add to this row of buttons on the detail page of a record in addition to such as the Edit and Delete buttons. And so then we want to display this link either in a new window or we can display it in the existing window with Sidebar or display an existing window without Sidebar or display an existing window without Sidebar or header. Another thing you can do with custom buttons is you can execute JavaScript. One thing to note is that custom buttons with JavaScript behavior are not supported in Lightning Experience.

This is a Salesforce Classic sort of action and so if you’re needing to execute JavaScript in Salesforce, you’ll be stuck on Salesforce Classic for now. If you need to be enlightening Experience then instead of doing a custom button with JavaScript you want to resort to using an action instead. And what I mean by an action is this link here for the buttons, links and Actions. In addition to creating custom buttons or links on this screen, there’s also an option to create custom actions and that’s more Lightning Experience friendly. We’ll be getting into Actions in the following lecture here soon, but for now we want to just display the resulting page whenever someone clicks the button. We’re going to display that in the existing window without Sidebar header so I can show you what that looks like as well.

There’s also this link to view behavior options and this gives you a list of all the different demonstrations of how this will look. So I’m going to close that out and then for this query that I’m going to form, I’m going to just paste this in and the main thing here and you can actually go to Google and perform a search in order to grab this first side of the query.

And this is the Httpsgoogle. com and it’s pounds and I’ve got the Merge field here which the way you drive the March field for the contact name is you select the field from the drop down here and then the Merge field you just simply select the field that you’re wanting to include in your search term. And so in this example, we’re searching for the name of the contact. And so that brings up the merch field for the Contact name field. Now I’m going to delete over those spaces there, and then I’m going to check the syntax for this custom button so it checks. The syntax shows that no syntax errors in the merch fields or functions. So now I’m going to click Save and okay to confirm the saving of this custom button. Now keep in mind that I created this custom button on the Contact records. So, for example, if we were to go to the Contacts tab, this is another standard object in Salesforce, and I’m going to go to the All Contacts list here. And so we’ve been dealing with Phyllis Cotton some previously, so let’s pull up her Contact record. And so you notice the buttons here that are available on her Contact Record are Edit, Delete, Clone, and Request Update. Now, the quickest way to edit the page layout from a specific record is to go through the Force menu and click Edit Layout. That takes you directly to the page layout for whatever record type of the object that you’re currently on.

You notice there’s four different page layouts here and the Phyllis Cotton one, as far as how it’s assigned to me based on the record type of that type of contact, I’ve got the page layout assignment of contact layout, and so it just automatically brings me to the correct page layout. So it’s a nice little tip up there. And then keep in mind, we’re working with buttons now in the Page Layout editor. And so you notice that we’ve got these different buttons here. You can click on the grayed out ones to see where they are in the page layout. And I’m going to scroll up a little more to show you that there’s several different buttons that are available here in the standard buttons section. And then if we wanted to add custom buttons to the page layout, we’d drag them to this custom buttons section. So I’m going to drag the Google Search custom button that we previously created in this lecture and drag it down to the custom buttons section. You notice that it turns green whenever we get close to bringing it down. That shows where we can drop this button, which would be in the custom buttons section of the page layout. We cannot drop it in the standard buttons section because it’s not a standard button. So I’m going to drop that in the custom buttons section of the page layout and click Save.

Then we’re going to go back to our Contact Record and we’ll see the Google Search button now appears on the top. And then as well down here below this detail section, once again is that same button that’s just Standard Behavior Salesforce. And so I’m going to click on the Google Search button. What should happen here is that we should form a Google Query search query, and it should open the same window that we’re in now currently without the sidebar or header, and it will form the search query of Phyllis Cotton. So let’s click on Google Search, our custom button that we just created. And you now see that it’s formed the search term Phyllis Cotton and it brings back the results on Google.

So you can begin to grasp some of the use cases for working with buttons. And now you know how to add those buttons to the page layout editor, if you keep in mind the behavior of the button was we took over the existing screen and we removed the sidebar in the header. So I’ve got to click the back button to go back to my salesforce instance. And so if I go back to Phyllis Cotton on the contact record, we’ll close this out by just saying you can go back into the edit layout from the Force. com menu item and you can remove the button by clicking on the buttons link here on the left. And then you can click on the button that you’re wanting to remove to find it. And you just click and drag back up to the top. And then what’s? Again. Click save.

5. Working with Custom Links in the Page Layout

Okay, so we previously worked with custom buttons and now I wanted to switch over to Lighting Experience to work with custom links. And before we get into custom links, I wanted to show you how custom buttons appear in Lighting Experience. In the previous lecture I mentioned how custom buttons with JavaScript behavior onclick Behavior do not work and are not supported in Lighting Experience. But I wanted to clarify that custom buttons that do not contain JavaScript do work and are supported in Lighting Experience. So I went back into the Page Loud Editor between lectures here and added back in the Google Search button. I just wanted to show you where these custom buttons appear in Lighting Experience. So if you click on this, this does warn you that following this link opens a new browser tab and sends you to a website outside of Salesforce. And so clicking continue after I confirm leaving salesforce. That’s how the custom button works in Lighting Experience. So now we’re going to create a similar type functionality for a Google Search using a custom link instead of a custom button. So in order to do so, we need to go to set up first of all. And so then we go to Objects and Fields and the Object Manager, and then we want to go to the Contact object.

And so we previously created the custom button and we want to do the same now for a custom link. And so you notice here the buttons, Links and Actions link. This is the same sort of link that appeared in Salesforce Classic in the setup menu. So if I click on that, this gives me the different buttons, links and actions that have been created or the standard ones that come in Salesforce. So you notice my custom one here is highlighted blue and so it’s the Google Search and that’s a Detail Page button. So I’m going to click on that and that brings up the detail of my custom button. Now what I want to do is I’m going to go ahead and copy this. So I’m going to highlight the actual query, the search query to use for later. I’m going to copy that. Well actually, rather than creating another item, I’m going to change this from a button to a link.

Now if you recall, this screen is the custom button or link. You have the option of creating buttons here with these bottom two radio buttons. And then this top one is a detailed page link. And so I’m just going to convert this over to a detailed Page link. You can view an example by clicking there that enables you to have a custom link in the custom link section of your page layout. So I’m going to close that example and so I don’t need that query because I’m just pulling from the previous one because we’re changing this from a button to a link.

And so I’m just going to click Save so now one thing, important thing to note is that I’ve got the custom button in my page layout on contact. Now, if you followed along in the previous lecture and removed that from the page layout, you should be fine at this point. But if you are getting this error message, that means you need to click here to view all references and change them to where appropriate. So it is showing where this custom button is referenced, and that’s in this contact layout, which is a page layout for contact.

So if I click on that, I can edit that page layout by going to the buttons section and clicking on Google Search to show me where that custom button is and click and drag it up here to once again remove that from the page layout and click Save. So now that it’s no longer referenced in an active page layout, I can go back to here. Let’s just try and click Save. I’ll probably have to cancel out of this and try again. Actually, let me get through without a problem there. So now that it was no longer referenced, it hit the server again and it verified that I can change that indeed to a custom link. Let’s go back to the Object manager now and go back to our contact object. Let’s look at the page layout assignment, see what contact page layout we’re assigned to so we get the right page here.

And so we’ve got a few different types of contacts. We got a customer contact, internal employee contact, and a partner contact. If you recall that we created those when we were dealing with record types. And so as a system administrator, I’ve got the contact layout for a couple of these record types and then a contact support layout for a partner contact. So I’m just going to go with the contact layout and adjust that page layout and add the custom link. And so now that we’re working with custom links, this third thing down here on the left hand side of the page, Loud Editor is for custom links. And so we only have the Google Search custom link available. So you notice that there’s this section here down below called Custom links. And that will only become visible if there’s any links in this section. And so I’m going to drag the Google Search custom link down here and then click Save. And now for that page layout, if you recall for System administrator, these two middle columns here, those are for customer and internal employee contact types.

And so let’s go to Phyllis Cotton. I don’t recall what type of contact she is. If she’s a partner, then that’s not going to show up in my custom links. So we’ve got to go to the Details section or the Details tab. So sometimes Salesforce Lightning Experience, you’ve got to click Refresh on your browser for changes to the page layout to appear. And so you default to the related tab. If you click on Details, you now have a custom link section down here on the bottom that displays and you can collapse that by clicking here or expanding to click again. And we’ve got our Google search.

So here’s how custom link works in Lightning Experience, clicking on Google Search, it warns me that we’re leaving Salesforce and it will open in a new tab and perform the search. And so it’s the same sort of behavior in this example. We’re just going to Google and perform a search on the contact name. But now it’s of it being a custom button that appears down here. We’ve converted that over to a custom link. You could have both as well. And so as we’re beginning to migrate from Salesforce classic over to Lighting Experience, you’re going to find the need to convert some things over or do things related to actions. And so in the next lecture we’re going to be working with quick actions.