 Hello everyone, I am Sanjay Gupta and I have Abhishek with me. So we are back with one more session on Omni Studio. So I know like from past few days we were not having any session on Omni Studio. So today we will be covering Flexcard. So Abhishek will explain what Flexcard is and will be implementing a end to end demo around Flexcard so that you can understand. So this way like all the concepts related to Omni Studio will be completed then we will be having two more things like how to deploy components and then end to end project. So this way like next week Omni Studio bootcamp will be like ending so that if you are following all the sessions so you can prepare for certification as well. So with this note like I hand over to Abhishek so that he can introduce himself and then we can proceed for the session. Yeah, thank you Sanjay. So hi everyone, myself Abhishek and I am working as a Salesforce and Velocity developer since five plus years now in Salesforce and Salesforce community and I have done some certifications around Salesforce like Omni Studio, Periwan Admin, Service Cloud and CPQ specialist and I have done several projects around Salesforce as well as Velocity Industries like Industry, CPQ, Health Insurance and Telecommunication. So that's all about it. Okay, thank you Abhishek. So moving forward if you want to become part of a community where lots of professionals are connected and they are learning and sharing job postings as well wherever jobs are available. You can become part of this group so that you will be updated about everything that is happening around Salesforce and if you want to receive timely notification for all the sessions so you can follow Sanjay Gupta Tech School. So on the next slide you will see all the social handles. So you can follow Sanjay Gupta Tech School on YouTube, LinkedIn, Instagram and Telegram and session tracker link is available in the description so you can follow all the sessions related to this bootcamp and other bootcamp from that tracker and please provide the feedback so that like it motivates us to do more things for you. So like recently me and Abhishek were discussing about some different bootcamps, those will be like based on scenario implementation. So we are just preparing for that and probably next week or so I will be sharing more information about that because it will improve your knowledge like after watching this bootcamp and the admin and development bootcamp. Now you will be having all the concepts related to Salesforce but if you want to deep dive and want to learn more with respect to scenarios so that particular scenario based bootcamp will be helping you. Okay, so with this note over to you Abhishek. Sure. So in previous sessions I mean till now we have completed all the OpenStudio components like data actor, integration procedure and OpenScript. So the only last component which is remaining in OpenStudio is Flexcard. So if I give you a recap I mean what components that we have gone through till now and what was the use. So for data reference we were doing all the things which we can do with the help of SQL and DMLs and with the help of integration procedure whatever we can do with the IPEX like writing down some sort of business logic or creating some sort of you know logic around data whatever you are receiving or you want to push it to the database. So whatever you can do into the IPEX class you can do with the help of integration procedure and if you want to create some sort of guided flow like we have flow builder in our Salesforce, core Salesforce and then you can use the OpenScripts so like flows we can take some inputs from user we can push it to database we can fetch some data from database that's all things we can do with the help of OpenScripts and last thing that we can that is that's we're going to go through in today's session is Flexcard. So Flexcard is just for you know showing some information to the user so let's say you want to create a list view right for showing all the account records right. So if you want to do with the Salesforce components then what you will be doing is you will be creating a whether a Aura component or the LWC. We are not preferably using the Aura components we are preferably using the LWCs now. So that kind of thing if you want to create some sort of card let's say in a card you want to show account name underneath that you want to show all the context related to it and on some sort of button click you want to you want to launch a guided flow so basically let's say in the LWC what you are doing in your parent LWC you are receiving all the account information and in that in the child LWC whatever account you want to edit you can create a guided flow for editing that account right so that's sort of same functionality you can do with the help of Flexcards as well like if you want to show a list of account records into your Flexcard and on the click of any sort of button if you want to edit some but some sort of account then what you can do is you can launch an omniscript with the help of Flexcard on that edit button. So let's jump into the you know trial or so to see how Flexcard actually works and at last we will be also seeing some two scenarios in today's session. First is we will be showing the account records in the data table so if someone is having the knowledge around LWC they must be aware of what is data table. So basically if you want to fetch some some sort of records from the database and if you want to show it into a tabular format then there is a there is a predefined LWC element which is called as data table that we can use into the Flexcard and in the second segment we will be fetching one private part of contact and we will be showing it to the showing it into the Flexcard. So for the first scenario we will be using a data adapter and for the second scenario we will be using some sort of other data tool to provide the data to this Flexcard. So let's jump into the org now and go to Flexcard. So first of all we're going to see the first scenario which is fetching the account records and showing it into the data table. So again I mean like what you can do is you can go to the Omnis Studio then in the Omnis Studio you can go to the Omnis Studio Flexcards then you can click on the new button then there we have then there we have two things first is name and second is title. So let's say if I give the name is like account list view okay and this author is this author that we can take it as like let's say SGTS and this author it doesn't matter I mean whatever you can give it into it but I mean it just shows which for which organization you are working for and for which for which organization you or for which client you are creating this Flexcard okay. So you can provide the name that title then theme will be lightning there is one more theme which is Newport which is similar to Omniscript that we have discussed. So previously Velocity or Omnis Studio launched with the theme of Newport only then after that they launched the lightning theme and if you it is this child card this is the same thing as we saw in the into the Omnis Omniscript that if you do not check this one and this Flexcard cannot be called from any other Flexcard this will be a parallel Flexcard right. If you want to make it a child Flexcard then you have to turn this flag on and you can provide the description and if I go next so in the next step they will they will ask you what data source you want to use to provide the data to this Flexcard. So basically if you want to use let's say SQL query, SOSL query, Apex class, Apex rest action, data rector rest IP, streaming API custom SDK. So in the Omniscript we in the Omniscript we were just using the data rectors or IPs right to fetch the data from databases but if you want to fetch the data into the Flexcard and provide it to provide it to it then you can use multiple things like SQL query as well SOSL query as well. So basically you can simply write it down the query that whatever you want to use it and you can show the data into this Flexcard. So for now I'm not sure what data source I'm going to use it so I'm going to go with the none as well so there is an option as well if you're not sure which data source you will be using you can go with the none as well and you can simply click on save okay and if I go back to our PPT so our first example is show account records and data table right. I have already created we have already created one data rector where we are providing a user input which is active whether it is yes or no whether it is yes or no and we are receiving the output of accounts right account active account name first name and all these things. So I'm going to use this data rector extract so as soon as your Flexcard have been created there will be a highlight panel where you will be seeing the author, versions, status, clone from if you have cloned any Flexcard from any other Flexcard then it will be coming there. A style Flexcard lies in the last modified theme and description and at the top you will be seeing buttons like preview, new version, clone, activate and help if you want to go to the developer guide then you can click on help. If you want to preview it then you can click on the preview if you want to create a new version or you want to create a clone of it then you can do it and similar to Omniscript if before using this Flexcard to anywhere you have to activate it and into the bottom part on the left side this is the panel where you will be using all your components slow so like if I go to the build then I have so many things in here like Omniscript if you want to show some chart, data, table, field, icon, menu, state and if I expand the input column then I have all the elements like checkbox, currency, date so if I drag and drop this one then there will be a checkbox element will be created here right so whatever elements you will be using from the build panel all elements will be coming in there okay so this is for your display thing and this is for your input thing so basically if you want to display some data then you can drag and drop some elements from here to there and if you want to take some sort of input from user then you can use these elements so and in the properties panel so basically there is a thing called in Flexcard which is called as state so if I go here again and if I drag and drop one more state right let's name it as like anything right so let's say you are calling this Flexcard from your Omniscript okay and you want to you want to show some sort of data into this Flexcard according to some sort of condition so there is a thing called state in the in the Flexcard so right now there are two state state first is active and second was as just as jts and if you click on this condition then you can add some sort of conditions like if that thing is true then show this state so that sort of thing also you can do it do it into the Flexcard so I mean I hope I'm able to make sense on this subject yes yes yeah right now I'm going to delete this state because we are not having this example in the style panel let's say if you want to set the height minimum height maximum height what background color background size whatever CSS you are known of all CSS you can apply it into the Flexcard so that is the biggest advantage of using Flexcard rather than LWCs because you don't have to write some sort of custom CSS if you want to apply a border type to this state you can directly select it top right bottom left and what what how much pixel let's say 10 pixel if you want the border radius or not what color you want what text color you want so that's sort of all things you can do okay and let's say if you're not able to provide some sort of CSS from the configurations at the bottom you can add your inline CSS as well so here also you can write it down any sort of let's say color anything like that so Flexcard is giving you that capability like if you if you're not able to do it any sort of thing with the configurations then you can just go and write the inline CSS to it okay it is I think related to all custom thing custom container class custom class inline CSS so therefore for design perspective it is right so that is there and in the setup part again I will go to the down as well till the down first so in the data source you will be able to see all the things that you all the options that you were able to see at the time of creation of flexcard so right now what we want is we want to call it data refter right or fetching the data so as soon as you will select the data refter name will appear and if I paste the my data after me it will come here right and if I go to the data refter again it is expecting an input into the user input variable right so in the input map what we can do is in the key like we can pass the user input and in the value let's say I'm going to pass as yes and if you want to test this data data refter from the flexcard only then you can just simply click on this saving patch and if you go to the JSON you will be able to see the data whatever is being written from there right now what so if you have worked with the worked on the data table into the lwc it always expects an area of list area of object so basically if I pass this whole data to the data table then data table won't be able to show show account records to me on the UI because it is having an object first right and then it is sorry it is having list first array first list first then it is having an object and then into the accounts it is having the list of objects correct so basically we want this data rather than so we want to trim it down right so what we're going to do is into the result JSON path first of all we're going to pick the zeroth index right and then what we're going to pick it pick is account account node account node so now if I click on save in fetch then now it is giving me all the list list of objects we will go we will see this again I'm going to remove it and I'm going to click on save in fetch so we have this list first which is on the zeroth index we have the object and in that object first object name is called as accounts so that's what we did on the zeroth index give me the account node and as soon as I do this my data is getting trimmed down right now what we're going to now what we're going to do is I'm going to go to build tab and in the display I'm going to drag and drop the where is that data table okay let me search data table and I'm going to drag and drop over here so I mean whenever we are using the data table into the into the lwc there are two things that we use to provide first is the column names and second is the data the the variable in which your data is stored so in the column name I mean I have added the data after first then I have added a data table so flex card is smart enough to understand or to create the mappings by itself only so we are receiving active name and id field into the into our output result right so the reason I mean because I have added the data after first then I have added the data table that is where flex card was able to recognize what is the mapping what will be the mappings for this data table otherwise if I if I if I'm dragging and dropping the data table first and if I'm doing the data setup part later then I have we have to create this mapping manually so wait one second so what I'm going to do is say it has a key none save and I'm going to go to build drag and drop this data table see there is no mapping created automatically and if I go to the setup again and if I put the data after I say this I'm going to say zero painting counts and if I click save and patch and if I click okay and now if I go to this data table now I have to create the mappings by myself so all the suggestions will be there but I have to create the mappings yeah so it would it would be always good like if we have the data like source first and then the component so it will save lots of time correct and all the configurations that we can pass through the data table into the LWC are configurable into the flex card like is sortable is searchable type like number okay active is text again name is text and id is also text and if it is editable user selectable so all these configurations we can do it and so this is the columns columns type that we have provided and whatever is being received by the setup part of flex card is going to get saved into the records records node automatically into the flex card so now if I go to preview one question Abhishek here so this records is like a predefined name or we can change it yeah it's a predefined name okay so whatever is being received into the flex card from source it's going to get saved into the records type only always node always okay so now if I click on the preview as we can see it is saying generating card LWC if you saw the screener right so similar to omniscript whenever we are activating our whenever we are activating our you know omniscript or flex card in the back end it is creating an creating LWC only so I mean like whomsoever is following the omniscript session they will be able to understand what I'm trying to say here so now what is happening this data rector sorry this flex card is giving us the data right like one two three four five six records but if you see this this data table is getting repeated for six times so one two three four five and six right and why is that because there is a thing called in setup which is repeat options and this thing is checked so basically we are receiving six records output record output records from the data rector and we have this checkbox set repeat records that means it will repeat the data table six times so now if I go to preview right so it is basis on number of records like if we were having 10 records so data table would have displayed 10 times correct yes and if you uncheck that record then only the data rector will be coming only one time and I will also tell you why this flex card have been configured in this way like how I mean the number of records we are getting from the data the data source by by that number that data that flex card is going to get repeated I will tell you the reason as well so as now this is coming with one only right now what we are going to do is I'm going to go to flex card again and I'm going to create one more so let's say contact record so this is our second you know second one so this will be for contact yeah okay the second scenario that we have into our ppt show contact records so now if I go again here and so directly I'm going to go to setup and now what we're going to select as a data source is sql query so I'm going to just simply write down the select id from contact okay and let's say name as well last name I'm going to get the last name and if I do this so if I select the sql queries I have the options as well order by fetch time of green flash delay and all these things and if I click save in patch as you can see I'm having all the contacts id and last name right and if I go to build and I would I just want to this you know show the data and in the label let's say I want to show the last name okay okay we will call it as last name and here we're going to select the last name and now if I go to preview right I will tell you the difference why we have to check that checkbox and uncheck that checkbox repeat options so this time it will be helpful yeah this time because in data table like in one table all the data will be there but here like different records will be in different card form correct so that is why flex card have been configured in such a way where if you are receiving 10 records then flex card will get repeated for 10 times because in data table we are showing all the data into the one so that is why we will disable that checkbox so see now this flex card itself getting repeated for how I mean like whatever number of records we are getting from that sql right and if I go to setup and if I do this part right then it will just show me the one data that's all let's just wait for yeah yeah and it's not even showing any sort of value as well because it's not I mean flex card is not able to identify from which node or from which index I should pick the data right I mean now if I go back to our this one what I'm going to do is I'm going to activate this flex card now this data table okay and when you are activating your flex card in the background it is basically creating a lwc component just give a couple of minute whatsoever is worked upon lwc right there is a meta xml file right where you have to define which on which target you want to use this lwc right record edit record page community page so if you go to publish options right you will be able to see all these things with the configuration so first of all you will see that is exposed then in the targets you will be able to see app page home page record page community page community report so these are the five options that we have when we are creating the lwc right so that also you can configure with the help of flex card so that is also helpful so if I click on save and now if I go to my home page I should be able to use this flex card into my home page okay so this way like I think omniscript also we can use the same way so I mean like omniscript doesn't give you the these options yeah these options that will be always exposed okay the reason is because you if you want to use your flow sales first flow you can use it anywhere right either on to your home page or community page that is why omniscript doesn't give you this option but flex card will always give you that option okay so if we implement omniscript and flex card so I think it is similar to screen flow once it's implemented so in the back end like we'll be using ip or data rector and in on ui like these omniscripts and flex card we can place so that we can see what data we are having and we can receive some inputs as well basis on that in the background we can do the process correct correct so I mean whenever whenever we are doing the real real implementation right so what we usually do is we are receiving some sort of records if if I want to you know do some sort of modifications on the existing existing functionality then first I'll be creating the flex card where I'll be showing the existing records right then on that record I will be showing some sort of edit button or something and on that edit button I will be launching that omniscript which will be working as a user guided okay so flex card is just for showing the data and omniscript like both input out of thing from flex card we generally don't receive input right correct I mean for small smaller things like if you want to get some name and show some data that that sort of user input you can get into the flex card but if you want to do some sort of complex functionality then you have to use the and another thing is you can never create a guided flow with the help of flex card right so flex card is like similar to lightning card just a ui and where we can put some data correct and another another thing I mean which cannot be covered into the sessions because we we have I mean that will be too vast for our omniscript sessions but with the help of with the help of flex card so again I mean if someone have worked upon the LWC there is a part which is called as event handling right application events component events pubs up and all these things right so that sort of things also you can do with the configurations on the flex card you don't have to a single write down a single line of code and you can do event handling of the LWC with the help of flex cards okay this is I think it is taking time yeah yeah I don't know why but maybe we can do a refresh yeah sure meanwhile I can show you that thing where where are those event handling options into the flex card you go here if I go to setup see this one this event is now if you click this is activated so and if I go to setup if you click on this add new here you will be seeing the type pubs up custom event record change you can define the name in the action you can also do what you want to do you want to call an omniscript you can do it you can call you can if you want to call some data on that event that also you can do so that that sort of things also available into the flex cards yeah so like it is same as we do in LWC but here through configuration we will be able to do yeah I mean like if someone someone doesn't have knowledge around the event handling they can actually do some sort of implementation yeah I think those who are like not good in programming still they want to pursue their career in Salesforce so I think with the configuration plus omnis studio they can survive as a developer in industry exactly and yeah I mean they will be able to I mean once they they will be able to complete the you know umni studio stuff then they will be able to understand the coding stuff as well because umni studio is nothing it's just that all the things that Salesforce has created they have created a UI for it that's it right I think now components are available in the custom yeah section so I have drag and drop there and here we can see right yeah I think it is similar to LWC component now correct great so I think whatever 15 sessions we have done so far so if we if anybody watch all the sessions so they will be able to create some sort of POCs so requirements will be same like whatever you are building through flows or LWC so guys try to implement that with the help of omnis studio tools right so in that case you will be able to understand and lots of options are available so in in our sessions I know like we cannot cover all the features those are provided by omnis studio but anyhow whenever you will be implementing those you can explore and maybe like in upcoming boot camps as I already told you we will be having some scenario-based implementation so we are targeting three things LWC integration and omnis studio so we'll see like which will be coming up first so till the time you can watch all the sessions practice and learn the concepts actually because nowadays in job market there are two types of developers needed one is salesforce developer and one is velocity developer so if you already have salesforce development knowledge so it is good for you if you have omnis studio knowledge then like you can say like you have both the you can work on both the types of clouds one is like functional clouds which are sale service marketing commerce and other than that if you have omnis studio knowledge so you can work on industry specific clouds as well right Abhishek? Yes Sanjay I mean like I mean if you want to become a velocity developer I will I would still call it velocity because omnis studio is just a you know a beginner guide to your journey to your velocity so if you still want to become a velocity developer just go with the omnis studio certification and all the tutorials and all the implementation practicals you can do then after that if you pick up any any one industries industry in velocity it can be health communication media energy telecommunication anything and become an expert for that that will give you an n number of opportunities into the salesforce domain right exactly okay so guys with this note like this flex card like brief implementation Abhishek gave you now you can try whatever LWC you have implemented so you can explore those things in omnis omnis script and flex card and at back end you can use IP and data adapters so we will be having two more sessions one one for deployment related things which will be like quick implementation and maybe will be of less duration and then we'll be having one session on end-to-end project implementation so where we'll be having a complete scenario and we'll try to focus on all the components of omnis studio like data adapter IP omnis script and flex card and with that implementation you will be getting knowledge like how to gather all the components you can club and implement a solution in omnis studio yeah okay so thank you Abhishek for this session and I like today's Saturday and still you were able to manage your time so I appreciate that and maybe next week also we'll be doing sessions on weekends or maybe on weekends we'll discuss and accordingly we'll be planning the sessions okay thank you bye everyone