Modern App Development On Salesforce – Front End Application Design Using Clicks and Low Code

Hey everyone thank you so much for joining the livestream today My name is Mohith Shrivastava I’m a Developer Advocate here at Salesforce and I welcome you all to this modern app development on Salesforce Today’s topic will be frontend application design using clicks and low code Now before I begin there’s a forward looking statement here Please do not make any purchasing decisions based on anything forward looking that we make today Alright so today we’ll be missing Julian he is busy with some exciting work So it’ll all be me walking through the front end application design using low code tools that we have and clicks so I’m all excited to get started Thumbs up if you have any audio issues Now if you want to get a video clarity there’s a button there at the HD just press on that and select your resolution based on your bandwidth Alright so just a bit of background on this modern app development series So this series is designed to take you through various stages of application development on Salesforce including design build test and deploy So for last three sessions we’ve covered things like data model not only on Salesforce but also on Heroku And today I’ll be talking about frontend application design using clicks and lowcode Now on next week we have a session around lightning web components and we’ll also talk about SLDS and also talk about how to prototype using sketch tools and things like that so pretty exciting and in December we’ll continue the conversation and I’ll get Julian on the call where we’ll explore some more Heroku content specifically like Apache Kafka and also how we can integrate Salesforce and Heroku platforms together We’ll also look into application testing for both JavaScript and Apex and also we’ll be looking into application packaging both for our node modules and also your Salesforce code base using unlocked packages and other stuff Okay so let’s get started with the conversation today and today for a change, there will be not much slides actually and we’ll be essentially looking at the clicks and the local tools that we have at Salesforce for a frontend application design So today we’ll start exploring App builder Now App Builder is our primary tool for creating pages like let’s say you want to create a homepage or a record page or an app page you can easily do that with App Builder and we will see how it sort of relates to page layouts we’ll explore something like dynamic farms that are very new to the platform And then how do you use out of box components to compose your pages? Obviously you can also use custom web components or a custom lightning components but you can always mix and match and create your layouts Sometimes you don’t need that customization and we’ll talk about that I’ll also look into I’ll also take you through compact layouts for customizing headers search layouts for customizing feeds on search page we’ll look into actions and buttons dynamic actions Then at the end if we have time we’ll also look into flows because flows flow screens specifically they are really awesome tool for designing multipage apps And again it’s a local tool so you can click and point you can also mix lightning web components with it which we’ll explore in further sessions but today this is our agenda for today So again today I straight away want to move into activity section because there’s not lot of content to actually share It’s more about how do we sort of understand what Salesforce provides out of box and how we can sort of use that to customize our pages So with that we move into our first activity for today which is how do you personalize your org

based on your branding using something called themes and branding So I have an org here and essentially I have a project on my local I this is the eCars project essentially So if you go to Trailhead Trailhead apps get hub report that’s where you can look into all of our sample gallery apps and today we are picking up on eCars application again again we chose this for this series because it has some really cool integrations with Heroku and really some cool use cases of IoT and stuff like that So I’ve cloned this app and sort of pushed to the scratch org now I’m not going to cover how to do that because we did cover in the previous session So recordings are out for first two sessions on Trailhead live so catch it up you can go to and filter for developer sessions where you’ll find them I’ll also see if I get an opportunity to put it on chat here Now during the presentation feel free to ask any questions I’ll be monitoring my chat window here and if there’s anything I would definitely if there’s anything that requires some answering I’ll definitely do that So yeah please feel free to actually post your questions and queries Okay so with that let’s move on to our first activity right? So how do we personalize your orgs as per your branding right? So Salesforce right makes it very easy we call it as themes Now themes are like your global branding essentially so you can create your new theme So essentially you’d say new theme you put the theme name and the API name and also put your branding Like for example we have Salesforce branding here but you can use your branding your brand colors and also how should the paid background be? What should be the color of your global header? What should be the colors for the links that you see on Salesforce right? So all of these are sort of configurable like for example the images that you need the default group banner that you need for your chatter profile pages for your user profile pages all of them can be configured in this new custom theme So we actually have a themes sort of built already so now I’m using the Lightning Blue theme right But for this eCars application we have a fictitous customer called Pulsar So we have designed a team for Pulsar so I’m going to activate that and show you how it actually changes everything so as you can see we have our own like header colors the background colors it’s all purple So let’s take a peek at it so as you can see it has it’s own logo the brand logo or the brand color the page backgrounds actually are picked really Purple and Blue colors here So yeah so this is your first activity is if you are having an (mumbles) right but you have Salesforce right You would definitely want to sort of make it look feel like your personal brand right And that’s where this whole theme-ing concept comes into picture where you can configure and create this So for Pulsar we have this so essentially if I actually go to the showroom application right you will see everywhere it’s purple and that’s the branding that we have Alright so now let’s move on to our second activity here so our second activity for today is creating a lead record page using AppBuilder for eCars Now I wanna mention one thing in Salesforce right? Everything is object context right so you create your data model right And all of your functionality is like especially the UI that comes out of box revolves around it Right now you can create homepage you can have a record page you can have an app page and I’ll show you what is an app page app page doesn’t tie to that record context right But overall in Salesforce a lot of things come out of box once you design your data model So that’s why in last session I mentioned how important it is to design your object model well because it not only affects your backend functionality also there’s lot of things on the front end that comes out of box with it So if you do it right you’re gonna get a lot of advantages out of it So now I’m going to go ahead and create a lead record page and this is an opportunity for me to show you the AppBuilder and how do you use AppBuilder to create pages So let’s take a look at it So again I’m in my org and we go to set up a lot of you might know this but for those of you are very new to Salesforce

I would like to take some time and really go slow here So we go to object manager find lead let’s find the lead object And so with that you get a lot of things here So one of them is Lightning record pages Now we already have a record page that comes out of box with the application the eCars application but let’s create our own to show you how we can do that So basically say new it takes you to a lightning page essentially So you have the option to choose from app page homepage Again homepage is what you’ll see on the home app page is it could be a tab essentially record page is what happens when you actually go to the record right? So there are three things that actually comes with an object as I said one is list view what you see here when you have the list view right? That’s called a list view where you can create your own list view you can also adjust your fields So that’s the list view right now when you actually click on the record you go to what we call it as detailed view So this is the detailed view this we call it as detailed view And when you actually edit the record that we call it as edit view So that’s how Salesforce sort of use you out of box UI already for you to sort of work with your object and the records So in this scenario right we’re gonna create our own application beach Let’s see if we have any questions so far feel free to ask questions as applicable I’ll be monitoring the chat window here if you have any questions Okay I don’t see any questions at this point so I think we are good Okay yeah That’s one so yeah so app page right so we’re gonna create a record page so we set a record page now I’m going to say lead new record page let’s say new record page for Pulsar that’s let’s just name it The next thing is to select the objects now we want to select the object as lead So we select that next so here right This is where it gets like really interesting is you have options to actually select your page templates And that’s very important because you again your requirements actually drive this So depending on who is accessing what information they need this thing you will have to sort of design Now one thing I want you to pay attention to is we also have something called a pinned header Now this becomes really important where let’s say you want a full word header and let’s say you want two sidebars which are always like sort of fixed with right? So that’s where you actually pick it up the pin header So we have pinned layouts like that we also have like a three region layout right Now sometimes you might want to build your own sort of template or a layout none of these might fit your application need and you might want to build your own sort of layout right? So there’s an application Very very sure that use case of how to actually build it up let me actually point you to that specific So you go to this easy spaces application here If you go to our styles and if you go to our components there are a couple of app pages where we show like for example this one we create a three by night That means we have your first section is like three column words like imagine it well column on your layout right? So imagine that your layout is spread into 12 columns right So we divide it into two regions one is three which are the width of three and the other one is nine Then we show one example of four and eight and you can actually browse through the code to see how we are build it it actually uses RR components because this functionality is still is not available in the lightning web components but you can use our components to actually create it And we clearly show you some examples you can even create a split view of like hiding and showing the views And we just which I thought was like really pretty cool So you should actually explore that if you’re trying to sort of use one of the the custom layouts right But for now I’m happy with just going with let’s say something like let’s pick up something like a header and a right sidebar Yeah let’s pick up something like header and right sidebar for this so I say finish And then I have ability to actually drag

and drop the components on the page right And this is where it gets interesting because what we have is you will see that on left side we have all the standard components here And on the I need and you also have custom components right So for this eCars application we have built some custom components And as we proceed along the CDs are lodged for you how to create these custom components as well So let’s actually just use your standard components for now So I want to pull up a record detail because this is a detailed layout and I want the detailed view to have the record detail Now before that there is one very cool out of box proponents called taps which really makes it really efficient if you need like more than more than one sections on the same page with with the limited space right So this is really cool now for example I wanted to say my default should be details I want my details to have to go first right So now I want to sort of pull the details record detailed view here So all the record detail here right On the related list right? Let’s say I want some related lists again related lists happens these are the views for your child objects So you create your parent object right And then let’s say you’re creating child objects with sort of links to those parent objects so that is where we need the related thing, right? So you you get child objects Those have their own sort of view and edit pages, right But this is like a link to that. Right? So again as I said your data models are dictates a lot of things because if you relate to objects you get this ability to sort of link those objects from the UI layer as well So let’s actually put a related section So related list section here, put the radiator list sections here, I have the detail here Let’s add one more tab for chatter So I’m going to go ahead and say pick up chatter So now I have chatter and let’s actually pull the chatter view here, so let’s call it as “chatter” will be the tab label Wait, chatter, okay Chatter is the tab label for that, right So I have chatter when I want to port out of box chatter component that comes right which has the hopefully this has the feed layout and also ability to post your chat to feed Okay, so we constructed this right now on the header or I might want to bring something like a compact layout So let’s bring up component card highlights panel which essentially is a compact layout Okay. So now I also want to bring up a component here which is essentially let’s say I want to bring activities component which sort of shows me the tasks and the calls that are logged for this particular lead, right So I’ve got all of these right? So again drag and drop right And I can I can optionally bring some more components like for example one of the components that interests me is the path component right? It comes out of box. It can basically this is an out of box component where you can tie up any picklist values. Like let’s say you have created a picklist in your object model you can tie those picklist values to something called path, so that when the record sort of changes, you actually see a path here very useful standard out of box component So let’s say I change the lead status or to automatically sort of move around right So this is how you actually build up your layouts Again, your requirements sort of drives these of what you choose like what layouts you choose, what components you choose, right You can also choose a custom component Like for example, let’s say a push notification component that I want to sort of drag and drop, I can, also one consideration is if you have a component which is growing or downwards and which doesn’t have a boundary, it’s usually recommended to actually put it at the bottom, so that, the user can actually keep scrolling sort of down or up and it’ll be able to sort of browse through the whole, whole view, okay So that it is this is how you actually build it up Now important thing here is when you actually activate it there are certain things that we need to remember here So you can make this page like an org default So what does an org default means is by default this will be displayed for all

the applications unless and until you actually go and override at the app level, right So if… so in Salesforce, right you will have many applications. Like for example when I’m here right? If you click on this and if you say view all you see many apps right? So you can configure your your record page So your record pages to be app specific or by default, right So if an app doesn’t have anything assigned you will see that default layout And that’s what it means by assigners or default Now you can go to the app level and assign at the app level For example I want this page for the showroom application and I want it for both desktop and foreign factors again for another a different conversation altogether You might want to make sure that some of your components are supported on the phone For example if you have a table right, you do not want to sort of make the components sort of visible on the font because it’s a table and it can scroll on the right and on the left, right and you should have a tabulated data You should actually think through the design a bit more before sort of enabling it And you can conditionally sort of for each of these components you can conditionally set the visibility I’ll come to that in a bit but for now let’s let’s go ahead and sort of activate it for a specific profile, oh sorry, specific app And one more thing I want to show you is you can also so in Salesforce right record types are very important So record types are a way for you to have like, sit on same objects you’ll get different record types which you can assign to different profiles, profiles are like, you can group your set of users into profiles So we have those profiles right where you can assign a record type like for example same record and you have X number of fields that might not be as relevant for another profile, right? So that for that functionality we have record types And also you can use the record types in your automation Like, lets say you want a process to run only for a specific record type. You can use this record type values to actually make sure that you add a decision element to your automation So that’s record type and we give you that ability to say, okay let’s say we have the same object being used for different processes and different personas that just different profiles, right you have variations for them, your requirements have different variations Like for example, if you have a let’s say an application for job seekers right your fields for let’s say a posting for mechanical engineering differs from the fields that you need for analytical engineers, right So that’s where this whole profile comes through the picture because what you can do is you can create as many record types as you want and then assign different profiles to them and also assign different layouts to them So that’s why we have this capability for now I’m going to just use the app default, right And yeah. So we accurate there’s a default I think it’s activated I guess we save it and yeah, so that should be it, that should actually, so this is the one that we have right. So if I already refresh my page we should see the layout we should see. Okay So this is the layout that we we just ask them right now There are some important things to actually consider a lot of Salesforce developers by no but for Heroku developers it’s made me a new thing So one thing we have is what we call it as a page layout, so what does the page layout? So what happens is you see this detail component, right? We have this feeds on the detail component Now that is also configurable So you go to edit page and then you essentially click on the edit page and then you go to lead layout So lead layout is what was previewed today And this is the layout where you actually arrange what fields that you need on the detailed view as well as when you actually edit the form what fields you need Now also note that these fields are also tied to permissions. So that means for a profile if you take the permission off let’s say I take the permission offering of far free level of security for edit What happens is you will see that that profile doesn’t have access to edit that fee, yeah So that’s the functionality we provide But yeah so this is what the page layout is You can actually arrange the fields here your as you need, like for example I need the title, I need the address here, right? So you change the layout and that should automatically get reflected in the detailed view here

Let’s see if it gets reflected Okay. Yeah This seems like it quite reflected the address the other side anyways. Yeah So that’s that’s how we actually build the layout So that’s how the layouts are tied Now I want to move on to the compact layout So if you go to page layouts, right There’s also something called as compact layout So here. Right So compact layouts actually decides what your fields will be on the top header That is this this section, right? So you basically a good who like for example I’ve created my own compact when it’s a one name email, phone, mobile and lead source So what happens here is if the field doesn’t have a value it sort of doesn’t appear but that’s what a compact layout does It allows you to do bunch of and again you can assign these compact layouts by your, essentially so this is your primary compact layout, right But you can really assign them by object and by by the by the profile Yeah. Okay Yeah Any questions feel free to sort of ask me, now that’s compact now Now we also have something called a search layout Search layouts are very, very important because what happens with the search layouts is let’s say you’re searching something right Let’s say you’re searching for a lead like for example Mark topics. Right So I want to search for that lead. Right So what are the results that you see? No, unfortunately I’m searching in the set up your way but let’s say I’m searching here. Right? Usually it also like if you search sometimes it it does bring the results, right So here this feeds right Like when you search what are the fields that should be visible on the search page that’s what you configured to the search layouts So yes. So yeah so that those are such layouts and you can configure them as well so okay So let’s move on to like actions and buttons right? So on this page you’ll see these actions right? So those actions actually come from page layouts So by default they come from page layout So if you actually go and click on them right you will see that there’s a lead layout So if you go to the lead layout actually we will see that there are we will see that there are buttons here specifically if you actually let’s. All right So you see there are so many actions and the buttons especially these buttons again these buttons depend on a lot of things Like some of them depend on what permissions that you have for them to actually appear For this used case, I think we have simple patterns that are appearing based on like for example I don’t have the survey license, so I’m not seeing the good survey invitation But essentially yeah this is where you configure now interestingly there’s something called as dynamic actions that actually, so you can override these buttons that you see here with something called as dynamic actions. So dynamic actions one of the capabilities of dynamic actions is you can actually set the action visibility. So for example let’s say I want to convert action, right? So I select that and I can add a filter based on saying, okay, if the annual revenue is this much or my city is this then make this button up here action And you can configure based on device You can also go into advanced and you can use permissions right? You can use the user permissions and stuff like that So yeah really powerful concept is dynamic actions and the advantages that they have or the buttons that you put on the page layout is the conditional visibility And that’s a very powerful feature So actually you should look into into this feature and really powerful and this dynamic actions is available for all the objects So, know that dynamic farms, which I’m going to talk about next is available only for custom objects at this not for standard objects but dynamic actions are on TA and they are available for your standard objects as well Okay, so with that actually let’s move on to our next activity Now before that I also want to actually show you how to so as a developer right?

So these are most probably admin tasks but initially you might as a developer you might set all these layouts right? So one of the things you can actually do in… again is go to your original studio where I have my project right And one of the features of scratch orgs that have been showing you is ability for you to actually pull the metadata behind it. Right? So we did a bunch of configurations. We went and sort of changed layouts, we assigned layouts, right? So we can pull all the metadata configurations here easily with the command like for force:source:pull So you execute force:source:pull again this was available in beta in developer edition orgs when you enable source tracking in your production orgs in scratch orgs, these are available. Right So for configuration that you need to do, you don’t have to remember there is a source tracking mechanism built into orgs which automatically tracks it So now you do force:source:pull So with that you will see that real shortly see that it’s going to look for all those changes that we just did in the org and it’s gonna pull the changes So that’s actually All the changes here. Okay So there you go. So we changed the lead layout We created this record page right? We created this, we modify it actually the custom application right So you can see all the metadata that we change. Right And the cool thing is if you have like source control you can see what are the things that got changed at the org as part of the configuration you would do So everything is sort of poured as a, as an XML package That is what we call it as metadata in Salesforce So, this workflow using scratch orgs makes it very easier if you have source tracking sort of enabled so that you don’t have to remember all those changes and you can pull that into your local Okay, let’s see if we have any questions before I sort of proceed in the chat Yeah. Let’s see if we have any questions All right. So I don’t see any questions so far So yeah. Please feel free to ask any questions or make comments and I’m going to monitor that and see how things are going Okay. So yeah So again the reason why I wanted to spend some time on the front-end application is a lot of you might know it again a lot of them a lot of this is like a revision but for those of you who are very new to Salesforce, it’s important to understand what are the things that are available to you out of box in terms of what you can do just where the And that’s why I wanted to take some time in this modern application development series and take you through some of that Okay. So the next thing that I want to actually, sort of walk you through is the next activity So let’s bring out our next activity Okay. So our next activity is dynamic forms, right? So dynamic forms again, dynamic forms available for custom objects Now I want to take the actions out of here So actions are available for standard objects as well as we see So let’s take a custom object like let’s say a vehicle object. Right And see if we can sort of use this new, new dynamic forms, now what are dynamic forms, right? Like we, you already saw that if I go to a record page like for example Waco’s is a good one, right? Probably this is this users accustomed component here but let’s say I had a standard component and like for example when we were on leads so if you if you see this right so this thing was completely driven by what configuration we made on the page layout. Okay So here’s the thing right? So this is completely driven by what we saw on the page layout, now I might want to conditionally sort of render the feeds. And that’s where page layout sort of gets that’s where the page layout sort of doesn’t work because what happens is the moment you start saying okay conditionally render this, conditionally render the specific fields You start creating many page layouts and many profiles and things like that and there’s no clean solution And that’s where the the dynamic forms which is an latest addition to to Salesforce right and available again, available only for custom objects in future, Safe Harbor

It might be available for certain objects as well So that’s where it shines So let’s actually go ahead and sort of create a layout where we can use this dynamic actions So I want to go to the object manager and let’s go to Vehicle object, let’s go to lightning record pages So, let’s edit this page which is already there and see what we can do with it So this is again this came out of the box actually Let’s see if there is generally if you’re on a standard page layout actually you have this option to upgrade, like for example you see this section right This section is using the record details So we give you this option where we say okay you want to upgrade to the dynamic forms go ahead and upgrade it, right So for example now I can say okay I want this thing I want this thing to go and upgrade to the dynamic layout and we give you automatic We basically give you an automatic manual to do that on [unheard] so as you can see now this is actually turned into the dynamic layouts Now the advantage that you can again with the dynamic layouts is again the conditional visibility right? So for example for each of the fields now I can add a filter. Right And not only that so we give you a layout here So you basically create your own sections Like for example the section that I have is a two column section right? So let’s say I wanted a further sections like for the subsections right out of this, I can add those like there’s an additional section here right? So you can add additional fields here in different sections, so you can you can keep adding different sections here and keep arranging your layout a bit more user-friendly and also one of the biggest advantages it said is the conditional visibility, right So you can actually go ahead and add the add the conditional visibility to this for example for this one we can also change this label to say vague or detailed something like this or regularly info Oh okay So this is default expanded section The section labeled should also be changeable, should be able to change that. Oh okay Got it. Okay Yeah. This is going to see a field section and you cannot really, really change this but I think what you can do is you can actually change this For example I can see a lead information and then I have option to save it’s one column if it is two column right That’s the best part of it is like you have the ability to actually do certain things And again the conditional visibility is always another advantage here So yeah. So this is a really cool way right? Again remember these are not supported to the in in mobile view it’s only for the next top view And actually clearly says that the record details are not according to aren’t supported anyways So yeah. So let’s just save it and the metadata behind It. Again whenever you do configuration rate you can actually pull to see what metadata went behind the scenes right Or what metadata part changed behind the scenes I’m going to just do a force:source:pull It’s going to say that we change we change certain things You can also run sfsx:force status It will tell you that this file got changed So it looks like the change file was…was the change right The record page. Right So you’ll see we enabled, we did enable actions configuration [unheard] behind the scenes for metadata. Right So it did change to that dynamic component So yeah So this is what I want to show you again custom objects only are displayed but really powerful because it gives you that conditional visibility and allows you to like sort of go really granular and arrange your [unheard] for your requirements Okay Alright. So before moving on let’s see if there are any questions or comments Yeah Just feel free to let me know if there’s anything that you need, anything that’s not clear and since we have some time we can actually get into that,

get into and show you some more stuff Okay It seems like everything is clear because I don’t see any chats Okay, cool Alright, so let’s actually move on to our next activity here So let’s move onto our slides Okay. So our next activity which is the last activity for the session around how do you notice sort of use tools, local tools and configurations in Salesforce to actually get you though the way that you need is flow script, now flow screens again till now what you have seen is everything is like object context And also what you’ve seen is, it’s all tied to the record page and objects and treats, right? That’s where like flow screen shines because they give you the widget and you know what we can do with flow screens is it’s all object independent So that makes it really powerful So actually let’s got to, let’s go back to our org where are we going to Look to our floor? Okay So if you have not sort of explored flows flows are turning out to be a really good product especially, one aspect of flows that I really like about is the ScreenFlows. They are really powerful and, you can mixed with lightning web components as well which makes it really more exciting and if you go to easy spaces application rate this application shows some of the use cases of using flows. In fact the we use flows along with lightning web components here but for this demo right what I’m gonna do is we’re gonna start creating a ScreenFlow which will be which can be used both for lead creation as well as let’s say contact creation So we’re gonna make it object agnostic That means, it works for the objects here and yeah let’s use some of the the ScreenFlow elements So we have ScreenFlow, so we go to ScreenFlow right now you can use (mumbles) or order layout, order layout are really cool because it automatically helped you organizing the layouts for you. So I’m gonna select that Now in a toolbox, right So you’ll say new resource and you select the type of the resource Now we need to make sure that we add a screen element here So let’s let’s begin with screen element again So you select screens and then you get this screen components on the page right So for now I’m going to so this let’s call this flow as, create, lead or contact Lets call that Okay. And then okay so that’s let’s call it lead or contact Let’s see So okay So create lead or contact And then what I want is maybe we want to put a pick list value. Let’s put a pick list value here which says, Okay. So let’s say let’s call it as do you want to create lead, create lead or contact? All right Okay And the data that I have for this is text Okay. So we want to enter the child’s value So let’s create a couple of constants here So one of them I’m going to call it as, let’s call it as lead data This will be text value will be lead These are the just some constants that are creating for the So next is so we picked that up actually Where was the Okay Let’s add one more Let’s say in your resource source type is Okay. So the resource type will be big cluster choice

No it’s trying to do a bit less choice It will be simple Constant, let’s call it contacts for that would be text at say contact Okay Right, so okay So I think I’m missing something here, let’s figure it out Okay quiet. Right? Okay. Let’s see a child’s element Let’s say a child’s elements that would be better So we created the constants right? So I’m going to say lead, so I’m gonna say lead choice as the API name or select the lead or contact and the child’s level will be the okay So this is select lead Let’s say select lead as the API name, the source type is child Let’s call it a select lead The choice label will be lead, data type is again text, choice value is again lead Okay. So that’s our first one And then let’s add the second one which will be select, select again, new resource And then let’s say choice and then select, select contact might be the API name, we might need a dash here So label will be contacts that select the text Let’s say the child’s value as contacts Okay Yeah. So so these other two childs that will be available for us Right So we call it as done Okay. Next screen element We want to add some screen elements here So we say screen elements right And this is where it gets interesting is you have all these options. Right So now I wanted to say okay I want a column for name, let’s call it as So this is like first name and last name right? Yeah it’s deleted Let’s just pick up a text field for now Okay, so text field, let’s call as last name Right. Let’s make it required And then let’s also add one more text field for company name Let’s call it as company name Okay And we can make that as required Now, you can also set visibility it all, et cetera And also add some validations. If you want let’s say you’re validating or something like phone number or email also let’s pick up an address one which is a complex screen element. Right So address one, again it asks you to map these values to sub variable right? So I’m going to say address, how much time do we have left? Okay. So we have 10 minutes left So we’re going to go a little more fast to see if we can complete this Okay. So city value again let’s create a variable here so that we can store that we can say city, data type is text that’s would be so this would be available for input and output as well And then country options right? Again this is for our particular state right? That just say country options Let’s just use the country value for now It’s going to value Let’s put it in a feed card country than say country, text Then I will go for input output Postal code value…again let’s just pick a variable and say postal code, data type is text, Done What else…we have state So we have four options Let’s say you have enabled state and country picklist It becomes really easy to map that way So there are two options here. So but now for this one let’s just say what else we have state right

So we say state let’s create a variable new resource variable, state…data type text Okay. Street value I’m not gonna bother about it. Okay So we have entered this right now So now we want to actually we can add data We can add so you have two errors What’s the two error here? What’s the two error? Let’s see the error Okay. So I am missing the label and the API name Okay. So this will be that’s call it us lead or contact input Contact form Okay Okay. So now I want to add that branching logic right And that’s where the flow makes it really easy for you to actually do that because you can add up our decision element to it right So it’s in your resource Okay. Sorry not in your resource We go with with a conditional logic here your SU and it’s actually go and add something here So we add logic. So we say add a logic Okay. So our logic here will be that’s [unheard] logic So this is where does the logic element Okay. So we’re gonna say beside whether it does lead or contact and decide whether it is lead or contact and then I’m gonna so we had this so we had this screen components right So we had this screen component where okay so let’s assign this selection try. So where was so these other variables this is the screen component that we created Okay. Let me see where we actually created So did I assign this to okay so this is the value that we’ve picked up and did I assign this to a variable? So these are the choices that came across, right So we said to cancel the trial to add a default value here And these are the choice elements that we’ve picked up Okay. So all that I’m trying to do here is select somebody said X a lead or a contact They come to this farm where they entered the last name and the company name Then they put the address and then once we finished taking the input then we add the data elements to actually connect to our objects So, but we need a conditional logic in place here to basically say whether it’s a lead or contact depending on the values that the user sort of entered So let’s see. So did heed or contact Right. So Okay So I think what we need to do is go back to the toolbox and let me switch off the auto layout editor so that, I see the elements nicely Okay, so now we need their decision elements or their time their decision element So I’m going to say is lead or contact, is lead or contact and then we say all conditions are met let’s create two outcomes. Right So one of the outcome is lead, right And the next outcome is Contact Okay. So now we need the resources to be effective Right So the resources will be okay. Yeah So you do need contact. Yeah So this screen right So okay So not visitor in fact it would be selected So I’m gonna see whether we have created a variable I think we need a variable we need a variable which captures okay We need a variable. Let me see So I’m running out of the time here and we’ll definitely continue the conversation in our next episode where I will further flesh out this example of showing how you can use these screen elements but for now just note that it’s pretty powerful feature actually flows

and you have these screen elements which basically allow you to do lot more than you can think Like, it gives you, it gives you different things like sliders and record choices, et cetera We have some very good examples in the use spaces app but I’ll flesh out this example in probably in the next episode, well we’re gonna complete this activity as well and then move on to our next session And next episode I will also have a guest for SMDs design and also I’ll bring Julion on in December where we’ll again go back and look at some of the Heroku content if you’re looking for Heroku content Okay. So with that some housekeeping items here right So I have some helpful references for you to actually try it out Like for example we have Trailhead modules which sort of explains all the concepts that I covered today And also yeah there’s a Trailhead module around flows on how to use the ScreenFlows as well, so do check it out Then, I encourage you to actually look at our sample gallery apps sample gallery apps are part of Trailhead apps where you can actually find a lot of used cases and in a lot of best practices So please do visit and take a look at it and share your feedback Then finally, you can catch us on Trailblazer community for our modern app development team. So if you have any questions comments or concerns about anything please do actually reach out to to us and yeah definitely around out of the time for the CLO example today But I plan to actually cover that in the next episode in the beginning of the next episode where we will showcase that example Okay and so thank you so much for joining today I have to actually vacate the stream for the next session So do stay out , if you’re looking for more sessions here, so I’m gonna stop the stream here in a moment here So yeah, just let us know and thank you so much for joining the stream today