Salesforce Certified Platform App Builder – 6 – User Interface

1. User Interface Introduction

All right guys, now it’s time to talk about the user interface of Salesforce. And this section is weighted at 14% on the exam. It’s an important section to understand and in my view, it’s probably the most changed from the developer 401 certification. So there’s a certain percentage of people that are taking this course that are trying to transition from the old developer 401 certification to the new platform app builder exam. Now, you may not realize this, but there is a transition exam available to you if you hold the developer 401 certification.

And so if you’re looking to transition, this particular section is one that you may not be familiar with. And so this is definitely newer concepts that are newer to the platform and that has to do with these more recent releases that Salesforce has provided, such as Salesforce One for Mobile and Lightning experience. And so back in the old days of the developer 401 certification, you just needed to know how to customize the standard page layout through the enhanced page layout editor. So now not only do you need to know how to do all of that, but you also need to deal with the new lighting experience user interface and how to deal with lighting pages and customize those.

You also will encounter a lot of limitations around that to where you can do certain things in the Lightning app builder. But then you need to pop over to Salesforce Classic to edit the page layout further. And then not only that, you also need to deal with the user interface of Salesforce One. Now, Salesforce is famous for saying if you can build an app on the platform, you’re a mobile developer immediately. And that’s true. Anything that you build on the platform is mobile ready and mobile friendly on the Salesforce One platform. But if you want to customize these apps for a better mobile experience, then you’ll be getting into things such as compact layouts and global actions and object specific actions, et cetera. And so in this section I go in depth not only with the standard functionality of the enhanced page layout editor, but we also get into editing lighting pages and then as well editing and customizing salesforce.

One layouts that will be getting into the navigation menu global and object specific actions and then as well what actions look like and how they behave and how they’re laid out and organized in lighting experience as well. Another cool thing, and this is one that I spent a lot of time trying to set up and make happen, is the automation of page layout changes based on record type changes of records. And so I have a few lectures in this section where we go into creating page layouts and tying a sales process to different page layouts so that when an opportunity is closed as one, for instance, it changes the page layout for the user, removes some buttons and does some pretty cool things. These are common types of scenarios that you’ll be faced with once you’re an app builder on the platform and this is your job. But it’s also important to understand these sorts of concepts and things that you can do in an automated fashion in order to automate page layout changes.

For instance, on the job and on the exam and so on the front end of this section we deal with the standard page layout and the older things and then as we progress further and more deeply into this section, we’ll be getting into Lightning pages. And then in a few sections we have a section devoted specifically to mobile. Well, we’ll go into salesforce one much more in depth. And so let’s get started with the user interface and how to customize it by introducing seen the enhanced page? Loud Editor.

2. Introducing the Enhanced Page Layout Editor

QIntroducing the enhanced page layout editor. So whenever you’re in an object in the Object Manager, such as the account object here that I’m in, you can access the Enhanced Page Layout editor by clicking on the Page layouts link for the object that you’re on. So I’m going to click on Page Layouts and that will take me to the different page layouts for the account object instead. So in order to get into one of these page layouts, you simply can click the down arrow here and select Edit. That opens up the Enhanced Page Layout editor and you can actually click through this down arrow here to access the other page layouts for the object once you’re in here.

So I’m on the account layout, but if I wanted to instead adjust the account marketing layout I just selected from the drop down and you notice that the screen updates accordingly. We’re going to return back to the account layout and we’ll start to explore some of these items here in the Page layout editor. So on the left you notice that the first section here are the different fields and these fields are available for drag and drop from the right. So you can simply click on one and drag it down below in the page layout in order to add it somewhere in the page layout. And then as well you can click on one of these grayed out fields and it’ll show you where it is in the page layout.

So a lot of times it’s hard to find a particular field. And so you can click on it here and it will highlight or show you where that field actually is. And so then as well, the ones that aren’t grayed out but appear active, those are ones that aren’t currently in the page layout. So you can simply click on those and drag and drop wherever you’d like to place them. And we’ll get more into working with fields in the Enhanced Page Layout Editor in the next lecture. But as far as the introduction to this page layout editor, the other sections here on the left in addition to fields would be buttons and this is where you can get into custom buttons that you can drag into the page layout. The next are custom links followed by Quick actions and then we get into the Salesforce one and Lightning actions that are available.

And then beyond that if you scroll down you can see expanded lookups that are available and then beyond that are the related lists and this is where you can drag additional related lists and that would be these lists here such as Contacts and opportunities and you can customize these further to control, sort, order and columns that appear. Additionally, you can have report charts available, you can do components as well. And then once you create VisualForce pages for the object that you’re on, such as the Account object. So if we had a VisualForce page related to the account object. Then there would be also a list here for VisualForce pages. You can actually embed those in a page layout as well. So I’m going to return back to the field section and then other functionality.

You can perform quick saves or do save as and save like a clone of this page layout into an additional page layout for the account object. For example, you can also preview these page layouts as different types of users and that’s by clicking the Preview as button. So if I wanted to see the custom marketing profile of what this page layout looks like for them, you can do so by selecting the profile from the drop down list. And then as well you can select others by just clicking the down arrow here. And this will show you the page layout based on the different profiles that you select. I’m going to go ahead and close this though. And then as well you can do a quick find on fields here. So if you wanted to, you could narrow down the search to be able to find a field that you’re looking for as well. You can click on the layout properties to see the page layout name and then as well some other designations here for the highlights panel and the interaction log. And showing that in the console enhanced page Layout editor is very useful. You’ll spend a lot of time in this, especially in this section of the course for the user interface. And stay tuned for the next lecture where we begin to work with Fields in the enhanced page layout editor.

3. Working with Fields in the Enhanced Page Layout Editor

So now we’re going to work with fields in the enhanced page loud editor and I showed you this previously as far as accessing the fields menu on the left here and that’s the topmost selection on the left. And you can find specific fields by typing in and it will narrow down the search here as you type. If we’re looking for data. com, for example, you could type in the word Data. And as well, once you’ve you locate the field that you want to add to the page layout, you simply drag and drop to place it where you would like to display it. Now the main thing to keep in mind is that you can only drop these fields in the sections that are highlighted green once you hover over them and that’s the detail information. And these will vary by the object that you’re working with, such as account there’s address information and then there’s additional information. A few other areas here, system information, description information as well. And then once you get down below you get into your related list and here’s your salesforce one only actions for these mobile cards.

And then the related lists, you can’t drag these fields. Like if I were to go back to all fields, you can’t drag a field into the page layout in one of these related lists because it doesn’t support that. I’m not able to drag this to these related lists for instance. And so usually fields can only be dragged and dropped into the topmost sections of the page layout. And then as well, you can also locate fields and I showed this before as well, but you can just click on a field to highlight where it is in the page layout. So if you wanted to hide something from the page layout, you can just simply drag and drop it back up here to the top of all fields and just place it anywhere and it will remove it from the page layout. And then as well you can reorder the appearance of fields.

You could move them over into different columns for instance. And then as well, one way that you can specify if you want one or two columns is by clicking the section properties icon, which is a wrench that appears to the very right when you get to the topmost section for a section of the page layout. So I click on the wrench, this is where I can give this a name. And then you can also display the section header on either the detail page or the edit page as well. And here’s where you specify the one or the two columns. And so with this one column, there’s nothing over here on the right. But notice what happens when I specify a two column layout.

You can do a tab key order and that means whenever you’re entering data in the edit page and if it’s a two column layout and you’ve got fields, then every time the user presses the tab key. It can either go left or right and all the way to the right and then down to the left and then to the right. Or you could do the top down approach where you can tab all the different fields on the left column and then when you reach the very bottom field on the left, then it goes to the top right.

So I click OK, I can click Save here and then I could go to an account page and we could look at what this looks like for the end user. Then if I go to an account, let’s go to Avid Insurance and go to the Details tab. So this would be the different Details sections. We’ve got our two column layout here. So scrolling down you see here to the bottom of the screen but the related lists and enlightening experience appear instead in this related tab. And it’s here that you get into the news for the account and then different related lists as well. But where you really see the tab order is if you go into Edit mode on an account, for example. So if I click Edit, this opens up all fields for editing. And so you can tap through here and you notice how it’s going left to right. And so there’s some inconsistency there. As far as for lighting experience, I think there’s still some kinks to be worked out. I’m going to cancel out of that. I’m going to switch over to Salesforce Classic and show you what that looks like now from that side of things. And so now if I go to Avid Insurance and Salesforce Classic and go into Edit mode so I’m actually on an opportunity, let me go to the account and then go into Edit mode on my account.

And so from the account object I can actually click the force. com menu item and click Edit Layout in order to access the page layout for the record type that I currently was on. So this is the Account Support page layout. A few other things to denote or to specify when working with fields is how to make a field required. And so what you can do is you can click the Properties wrench icon for a specific field and then you can specify if you want this read only and or if you want to make this required. Now if a field is required, it can’t be read only, it has to be editable by the end users. So it’s an either or proposition here. So if we want Fax to be set to read only on the page layout level, this would be for all users that have access to this page layout.

Then we could do that. You can make a field as well read only on the profile level and through field level security, or you can do that through the page layout as I just showed here. So when it’s read only, you notice there’s this lock icon that appears next to the field. And so if I click save to save this page layout, we return back to that account. Now, you notice the fax number is editable for me because I’m an admin. Other users, it would be locked and read only.

So one thing to keep in mind is that you can make a field read only at the page layout out. But that can be overridden if you’re an admin or if your profile allows you to edit those fields. So once again, in order to access the page layout editor, you can click the force. com menu item here on the right in Salesforce Classic and click Edit Layout. And then if you want to switch between layouts for an object, you can select them here. And so in the next lecture, we’re going to be dealing with buttons as we work with buttons in the page layout.