 Can we shift to first slide, beginning slide? I think you need to refresh. Hello everyone, I am Sanjay Gupta and I welcome you on Sanjay Gupta Tech School. So this is day 9 session of this Appian Bootcamp and I have Ankit with me. So welcome Ankit on the platform. So due to some reason we were not able to have the session yesterday. So today and tomorrow we will be having the session. So day 9 today and day 10 tomorrow. And I hope whatever session Ankit have delivered so far. So you have gone through and you are learning. And for practice like instances are also available. So if you need, so you can raise a request so that Ankit can provide. So for that you can utilize our telegram group. So Ankit will be telling you about that group link. And it is available in the video description as well. So you can just like raise a request there. Okay. And if you want to follow or you want to receive timely notifications. So you can follow Sanjay Gupta Tech School on YouTube, LinkedIn, Instagram and telegram. And all the important links are available in the video's description. Okay. So over to you Ankit have the session started. Thank you. Thank you very much. So if you want to check the recorded sessions, you can go through this. The code mesh fraud YouTube channel. You will find all the recorded sessions and other APN related content. So you can go and check out that if you have any query. Or you know that if you're buried or any questions, or you can ping us on that called mesh fraud telegram channel. So you can go and can put the questions and we will reply back on that. So in our last sessions, last two sessions, we were discussing about, you know, expressions rules on APN. So expressions rules are related to, you know, that to calculate the data out to, you know, to do some many patients in the data. So that is completed into data. Today we will discuss about, we'll learn about APN interfaces. So as we already discussed that APN expressions rules are to work on data, to create the logics on data, to create some calculations on data, to get the data from database or some other sources. We use the expressions rules. But if you want, you know, we want to interact with the user. Okay. Like if any of the user come and want to interact with system. So in that case, we use APN interfaces. So using interfaces, any of the user can interact with the system, can put their data, can, you know, in the user inputs, user inputs or can, you know, see the data, whatever data is stored somewhere. So user can interact completely with the help of APN interfaces. Okay. So now we will create our first interface. So same like, you know, expression rule, we will go to new. Okay. And you can see here we have an option to create interface. So I will click on that particular button. And you can see this initials are already coming here. So because these are, these are our applications initials that we are, we are using to create the name of the interface. Okay. So naming convention of the interface is also similar to the expression rule that we should follow. Like suppose if I, if I'm displaying something or if I'm taking the input from user for like, you know, that fill the employee details. So I can see the employee details. Okay. It is also in camel casing. So lower camel case, or if any, in any of the application, if you are using upper camel case, then we can use the upper camel case also. But it must be consistent in all of them in completely application. Okay. And from here I can put the description like contents interface in which user can input the data. I can do it like this. Okay. Okay. And then similar to, you know, that expression rule, we save interfaces also in rule type of folder. Okay. So we created one rule folder right on in our last sessions, like 80 expressions rule, we created for expressions rule and 80 interfaces, we created for interfaces. Okay. So we will save our all of the interfaces into 80 interfaces. Okay. And like for each type of rule, we have separate folder. Right. And like if I'm creating constants, I will store constant into constant type constant folder. Okay. That is also a rule type folder. If I'm creating interface, I will store into interface folder. If I'm creating a expression rule, I will store into 80 expression rules. Okay. So for each type of artifacts, we have separate folder. Suppose if I do not have any folder for 80 interfaces, I can create by clicking on this link also. Okay. So that also we can do from here as well. Okay. So now you can see that we have multiple ways to create folder. Once I can go to new and can create a folder or I can create from directly from here as well. Now, if I want to create an interface, I can click here on this create button and I can create. Okay. So I want to duplicate the existing interface. Then I will use the second option. Okay. Now we are creating from scratch. That's why I use this first one. But if suppose there is already an interface created and I want to create the duplicate of that interface, then I will use the second option. Okay. So now I will click on this create button and this interface will be created. Okay. So you can see here in this security option did not click like we tried into group and folders. So there was one option to configure the security, but in expression rule also a pen do not ask for, you know, put the security and then interface also it is not asking to configure the security because it by default it take the security from its parent. Okay. Because we know that we stored this interface into a folder that the interface. So it will inherit the security from that folder itself. You don't need to explicitly define the security. But if you want to define the security that is different than folder, then you can go from here. This is the security option. Okay. And I can uncheck this one. It is like inherit security from parent. Parenting its folder. Right. So it is inheriting the security from this parent folder. But suppose I want to define the security that is different than this folder, then I have to simply uncheck this box and I can define the security. I can delete any of the group from here or I can change the role from here. Like if I want to create make this administrator, I can make if I want to make editor, I can make. Okay. And if you were, I can make if I want to add a new group here, I can add. Okay. So in this one, I can add users also. Right. Add users or group, but it is not a best practice to add users in the security. Right. Because if I'm adding a user, that user might not be available on other environment or production environment where user will actually use the application. Okay. That's why we use groups and in APN, we can deploy groups, but we cannot deploy users from one environment to other environment. So generally, it's a best practice to use groups to define the security, but not the user. Okay. So every time whenever we are creating any application, we will define the security with the help of groups, but not with the users. Okay. So now you can see here, we have this window and using this window, we will create our interface. Okay. So now we go through that, you know, learn about naming convention, that naming convention is we generally use camel casing here. Okay. With proper name like what is the use of interface so that you use of the interface or the purpose of the interface should be in that name. So easily anyone can come and can understand why we have created this interface and then interface description. So description is, you know, that we define the description also for this particular interface that you saw that in that one, we define the description because you know that to understand the purpose of the interface because in name, we can put some limit of, you know, characters only, but description can be, can have any length. So that have the bigger length so we can provide the purpose of the interface creation and what is the use of the interface creation. So everything we can put in description. So anyone can easily understand the use of particular interface. Description is not the mandatory. So if I put blame, then also I can create the interface, but the name is mandatory. And name will be unique also. So if I created an interface with this name, A, B, till employee details and if I try to create the interface or any other rule with the same name, it will give me the error. So if I try to create the interface with the same name that it already have, it will give me the error, that name already exists. And it won't allow me to create the interface. If I want to duplicate the interface, I can go here and can click, fill the name here. This is a picker field, suggestion field. So it is suggesting me the name. I can select and you can see we have the same name, but we cannot create the interface with the same name that already exists. So I have to change the name, like I'm updating something like that and it will create a new interface with this particular name and description. I have to just click on this create button and it will create the interface for me. That will be the second interface and it will clone the code that is in the first interface. It's in folder that we already checked that to save the particular interface also we use a rule type of folder but we create separate folder for each type of artifact, like for expression we create a one folder for interface we create separate folder for constant we create other folder. And now security, so if I'm creating interface, so it will automatically pull the security on the security of the folder in which it is stored but we can explicitly define the security also. We can update the security. That we learn like how we can do that. Now you can see here this is design mode in which it is opened. So in design mode we can drag know that drag and drop the component that you can provide and can create the interface. So you can see here there are some components that is already defined here, there are some patterns design library and some templates are also there. So you can directly use the template that APN have provided. So we can directly use these templates and we have edit preview and pro performance test. So you can see here this is edit where you can edit the interface. Whatever you want to add in this particular interface you can add from this edit option. If you want to delete, if you want to edit, if you want to add some components you can directly use add from this edit one. Now if you want to check know that interface, what interface is developed, design so you can go to preview and you can check. In preview you cannot add the new component. You can add only in edit mode. And if you want to check the performance also of the particular interface then you can go to this particular one. Currently it is coming as disabled because we do not have any code right now. We did not add anything. So it is coming as disabled and it is showing a message that cannot switch to performance view and expression is empty. That means there is no any component that current interface have. Okay. Now templates. Okay. So you can see here APN have some preview templates like form, pages, there are some examples right. So we can directly use these components. Okay. And we can create our interface. So suppose I want this form. Okay. This is a one column form. There might be more columns that we will learn how we can create but this is one column form. Okay. So to use this particular form I have to just click on this form okay. And it is coming here in the middle and you can see this is the form and it is the header of the form these are the section of the form and there are two buttons that is automatically created. Okay. You have to just click on that particular template and it will automatically create for you. Okay. Now if you want to use the other one like if I want to use this one this two column form then also I have to click here and it will create for me. Now you can see here we have two columns first one this one this component this column and this is second column. Okay. So like this we can create and column of architecture. Okay. Whatever we have needed right. So like this we can use the pre-built templates. Okay. We have others also like this is three column this is with milestone wherever we are needed we can use this. Okay. And these are four with vertical milestone. So if I click on this one so you can see here it have milestone as well. That is a horizontal milestone which are some you know these are have four milestones like step one, step two, step three and review. Okay. So this is created same like that we can if you want vertical milestone okay then I can click on this and I can use this. Okay. So this will have vertical milestone you can see here this is vertical milestone. Okay. That have four step one, step two, step three and review and this is the form. Okay. So like this we can create the interface. Okay. With the help of drag and drop functionality. Now you can see here we have pages as well. Okay. If you want to create page you can use this, you know, pre-built template also. So suppose if I want to create a three column form you can see here we have three column form. Okay. This is this one does not have any buttons or any labels. Okay. Because this is simple three column architecture. Okay. Structure and not a particular form where user can submit the request. Okay. And similarly we have others in this one you can see we have billboard header and then two columns. So if you want to create the similar structure you can use this. Okay. So on this top this is a billboard that have one image in background. Okay. And have two sections also. Right. One section with two columns. Okay. So if anywhere we needed this type of a structure we can directly use. We do not write need to write the code. Okay. But we can directly use this. Okay. If I want this structure I can use this. If I want this type of structure I can use this. Okay. Like if I am clicking on this one this structure is coming. Okay. There are some sections here and some sections also. Okay. That is the part of this one and this one section and subsection also here. Okay. So if we want this type of structure we can use this. And now you can see here there are more structure. Okay. On which you can practice you have to just click on this and you will be able to use. Like this one. So this one have billboard and some cards also. Right. These are some cards or some components. Okay. They have multiple columns. Right. So if we want this type of structure we can use this. And there are some interface examples also that we can directly use. So suppose if I want to create a request form I have to click on this one and I can use this. You can see here this is automatically created. This interface. If you want to change anything you can change from here. Okay. And this will have the code also. So if I go to this expression mode you can see here in the left side it have code for this particular structure. Okay. This code is automatically created by EPN. We did not write a single line of code also. It is automatically created. But you know that if you want to update I can go here and I can update. Okay. Whatever I have needed I can update from here. From the code part. Okay. That I can do. Okay. So similarly we have other pre-built interfaces also. Like you can see here if I want to check the sales dashboard I have to click here and it will automatically create the sales dashboard. Okay. You do not need to write the code. But you know that whenever you are working into the real-time application you have to do some updates. Okay. So to do some updates you have to go to this expression mode that we will learn in our next session how we write the expression. But you have to go to this expression and you can update this. Okay. Whatever you are needed you can update and your data will display here. Okay. But this is like you know the template that you can directly use. Similarly we have other templates also. Like landing page 1, 2, 3 sales pipeline, case dashboard okay and other one. So if I click on this one it will have the interface type. Okay. So if I want this type of structure I can use this one. If I have some other type of structure so I can select other template and it will automatically come here. Okay. So that I can directly use. Okay. Like if I want to have this portal form. Okay. I can use this. I have to just click and I can use this. So now you can see this interface is automatically created. Okay. The images and everything created and if you want to update you can update. Okay. But at the first time you have to try to write the code you can directly use rebuild template wherever we are needed the similar structure. Okay. Similarly we have other you know examples as well that you can directly use. Okay. According to your need. Okay. Whatever requirement you have and so you can use this rebuild template. Okay. You do not need to write the code from initial. Okay. From scratch. Like there is one builder as well. So this is a CDT builder or data type builder. So from here you can create the data type. Right. We learn about data type creation. There were four method one was from scratch. One was duplicating the existing data type one from the database and the other was from XSD. Okay. But this is also a way. Okay. So you can provide this data builder from where we can create the data type. Okay. In this one. So suppose I have a data type. Okay. And I want to create the interface. Okay. So for that we can use this. Okay. So suppose I have one data type that is AB employee address. Okay. And if I want to use this CDT build to create the interface I can use this. So okay. And you can see here all of the fields is automatically coming here from the CDT and I have created this interface. Okay. I do not need to write anything any single line of code. I can just use that form builder and I can I have to just put the CDT on which I need to create the particular interface again. If I want to delete a particular field I can delete from here. Okay. Like I have to go to this expression mode and I can delete the particular part. Okay. And it will delete from here. That we will learn the expression mode but yes. Like from there we can delete the particular field. So now you can see we do not have that employee ID build that was initially there. Okay. So like this with the help of CDT also we have created an interface. Okay. Last time we know that we checked about the preview. So suppose this is one interface. Okay. So this is one interface that we created. If you want to preview. So I have to just click on this one and I can see the preview that how it will look like to user. So like this we can see the preview. Okay. And there are multiple modes here. So if it is a wide desktop I can click this one to check how it will look like into the wide desktop version if it is a desktop. So it will look like this if it is a narrow desktop. So it will look like this if it is a tab. So in tablet it will look like this. Okay. And if it is a mobile phone then it will look like this. So you do not need to write the code again and again for different system. You can have you have to just write once and you can write the device and it will show you that how it will display in the different different system. You don't need to go to mobile and open that interface to check that how it will look. But you can directly check from here as well. Okay. So this concept is provided by APN. Okay. Now if you want to check the performance of this interface you can check from here. Okay. So it is displaying the performance that how it how much time it is taking to execute and to display the objects in the particular interface. Like you can see here it is taking 83 milliseconds. Okay. This header content layout is taking 83 milliseconds and it is divided like header is taking 10 milliseconds and then content is taking 73 milliseconds and this header content layout is taking 1 millisecond. Okay. So like this you can check and there are other components. Okay. And so it is defining, you know, describing that its performance by item, you know, that component by component. So if you can check the performance of each component like this component using 10 times in this interface this particular in 13 time and how much time it is taking it is taking 51 millisecond it is taking 11 milliseconds something like that. Okay. So you can check the performance from here. Okay. And if any of the artifacts or of the component which is taking time that we can optimize whenever we have needed. So like this we can use the existing templates. Okay. Now you can see in the left side we have these three buttons. Okay. Component patterns and design library. Okay. So first we will, you know, learn about layout. Okay. That is in this one. Okay. So in this one there are some interface layouts that we can create. Okay. That can be a form layout can be a section layout. Okay. So any type of layout we can use here. Okay. So if I want to create a form layout I can create a form layout. If I want a section a card layout I can directly use. Okay. So here you can see in this section we have layouts like section layout, columns layout, side by side layout, box layout, card layout and billboard layout. Okay. And every layout have its own use. So if I create, if I want to use this section layout I have to just drag this one. Okay. And I can directly use this section layout here. Okay. I can configure the section layout from here itself that whatever component I want I can directly use in this. Similarly if I want to create the other layout like columns layout I can directly use here. Okay. And you can see here we have three columns structure. If you want to delete any of the column you can direct just click on this one and it will be deleted. Okay. If you want to add additional column you can add from here this plus sign in right side you can see. So if I want to add any of the new column I have to just click on this one. If I want to delete any of the column I have to click on this delete icon. Okay. So like this we can add or delete columns in this one. Okay. Similarly if I want side by side layout I have to click here and it will create me the creates side by side layout for me. Okay. If I want other layouts and it will create a blank or empty layout. Okay. We have to configure this one. We have to put any of the column that I want to add. I have to add that one. Okay. If I want box layout I have to drag this one and it will create box layout for me. Okay. If I want any configuration I can configure also. Okay. So these are layout on which we have to you know you have to do that some practice. Like if I want to use card layout then I can drag this card layout. Okay. And now I have card layout I have to configure that one. I can configure. Okay. I have if I want to duplicate I can duplicate from here. If I want to delete I can delete from here. If I want to go to the parent I can go from here. Okay. So these are layouts that APN provide us. Now we have some other components like input components. Okay. Where user can input the data. Okay. That you will see one. So suppose there is a section layout. And in section layout I want a text field. Okay. So I have to just drag this text field. And you can see here we have this text field now. Okay. So this text field and in this one user can input the data. Okay. From here. Okay. And it will be saving some variables that configuration we will see but like this you can drag there. You know this one. So now if you want to configure this particular text field you can see in right side we have label. Okay. Label is like text. If I want to update I can update this. Employee mail. Okay. So you can see here employee name is coming now. Okay. If this label position. So you can see here label position we have. There are four options for label position. One is above. Other is adjacent that just specified and if you want adjacent I have to click on this one. And now you can see the label is coming left side of the box. Right. If I click on the specified. Okay. It is coming and like this according to the page size. Okay. And if I want to hide this one I have to just click on this one. Now you can see there is no any label. Okay. So it hidden the label. If you want to add any instruction though that you have to fill this one. Like I can see I mean input the instruction. Okay. So from here I can put the instruction and you can see here we have instruction now. Right. In the bottom of the particular field or component. Okay. If I want help to update. Okay. So I can use this one this help tool tip. Okay. I have to just copy. I can click here as well. Okay. Now you can see this icon is coming this question mark and this message is coming that we are configuring that help to help tool tip box okay or parameter. If I want placeholder I can configure this one. You can see here this box we have placeholder now. Right. Like this display value and save into. Okay. So whatever value is displaying here. We configure into the display value and whatever value you know the value that we want to save into the some variables we use the save into part. Okay. So like so we can use this one. So similar to expression rule. We can create the rule input in this interface as well. Okay. So suppose I am creating a that is employee name. Okay. For rule input also generally we use the ML casing employee name and in description I can fill or name of the employee. Okay. It's type we can select text type because employee type will be employee name will be text type. Now we have variable type. So in display value I can put this one. Okay. Employee name. So whatever will be in this rule input value will display here. Okay. In this box automatically and save into is to store the value into a particular variable. Okay. So in this one also I am selecting this employee name. Okay. So like suppose I am selecting filling here. I'm typing on key. So now the value of this rule input is you can see from here Ankit. Right. This is the value of this variable. Okay. If I am updating this to someone Sanjay. So you can see here the value is also updated because of save into. Okay. So first it is saving the value that user is typing into the save into parameter. Okay. And then it is displaying into the particular box. Okay. With the help of display value. Right. So like this we use the display value and save into. Okay. There is one parameter that is repress after. Okay. So repress after is unpopular. That means if I am clicking outside of the box then it will run execute like currently its value Sanjay that you can see in the value part if I am updating this to Ankit. Okay. Now also it is Sanjay. Now if I click outside it will update. Right. Ankit. But if I am using key press so whenever I am pressing the key it will update like you can see here it is updating at the same time. Just typing and it is updating right into the right side. So like it works like on key press if I want to put the character limit like suppose I am putting character limit to then it will give me the validation like because now we have five characters. Six characters. Right. So it is giving the validation that text cannot be longer than two characters. Six characters received. Right. If I put seven okay. Now it is not giving them giving me the validation. Right. It is not any validation message because its length is six and I and limit is seven. Okay. If I have one two more characters. Okay. Then it will give me the error. Right. The text cannot be longer than seven characters received. Okay. So like this validation works. There are you can see in right left side we have other components also input components okay like integer field, decimal field, date field, date and time okay. That you can okay learn or you can read I will pro you know I will provide you the link of this or even component on which you can practice. Okay. By yourself you can go to the documentation link. You can check what is the use of this all of these components. Okay. And what all parameters are needed okay. Most of the parameters will be same that we you know learn today but there might be some difference parameters as well that we will okay have to do the practice and that we can check from that documentation link that I will provide you in telegram group. Okay. Now we have selection type of components as well like if I want drop down in which I have to select the particular value okay then I can use this select them in this input field I have to type manually right the data but sometime we need to select the value from the existing options like country name right country name we generally select from existing values so for that we use selection components okay. So this is the use of selection components okay you can go through the documentation and you can read and we will you know learn deeply in the next session same like we have display like if I want to display some image okay some rich text or they know that text in color or some ball or something then we use the rich text if I want to know that you know display something into the this type of structure okay or in the tag we use the tag component okay so similarly we have multiple display components okay that we can use to display that you know that is details or the information so for that we use display component same like we have some actions like if I want to click on some link and if I want to go to the next page other pages if I want to you know call any of the URL then I use link if I want to click on something and perform something so I use button okay similarly we are record section so about record we will learn in next session our coming session and on that record we have some actions so we can use this record action for this one okay similarly we can create grids and lists okay with the help of this one like editable grid the user can update the data like you have here in this one quantity price and price user can update right for that we use editable grid and that second is read only grid okay so if I just want to check the data to see the data for that we use the read only grid okay and other is like event history list okay so if I want to check the data like history type of data or audit type of data then we use this event history list it has some charts picker and all okay so we will learn about this in our next session but before that I will provide you the link of all type of components that APN provide so first you can go through the document and you can check all of that you know that components build what all parameters are these components needed and what is the use of these components okay that we can go through and can check from the documentation okay so you will be it will be for you to understand okay but most of the time the configuration will be almost same like this only okay so you can refer this and you can practice on that part okay so for today in our today session we learn like how to create interface and what all layouts APN provided what is the design mode how you know we can use the design mode we can create the interface how we can create the rule inputs interface rule inputs is similar to expression rule only that we can create of any type of know that rule input and how we can use other options like other components it can be input field it can be selection field okay so all of this topics we learn today in our next session we will learn about you know the other components like the selection component display component okay action and grids okay but before that I will provide you the documentation of APN related to APN from interface components that you can go through and can check okay that about you can learn about you can read about this other type of components so that you will have some you know some view on that so that it will be easy for you to understand okay so this is all for today and if you want community environment access because now we have some community environment so we are providing one by one so if you anyone or else of you want to access the environment want the environment access you can go through this link that is already in the you know that description of this video and in this so you can fill your details and you will get the access okay whenever we have that and if you have any query so you can put in our telegram channel as well as in this email ID also okay so we will you know whatever query you have we will provide you the solution of that one so thanks for today I want to hand over to Sanjay sir thank you thank you Ankit for sharing insightful session I think today you use some low-code platform to draw or to implement things right I am not much about appian so yes yes yes yes so it's an appian inbuilt feature where you can drag and drop you know that component and you can create your interface right yeah I think folks will be learning a lot with this and guys if you want to do regular practice so please raise a request for instance so that whatever sessions Ankit is delivering you can practice and as we already told you this is a job oriented course so if you do appian so like immediately you will be having a chance to get a job opportunity right so do follow all the sessions and do practice and please share a review or feedback so that we get motivated and provide you more and more content okay thank you Ankit for sharing insightful session and we will be having more session tomorrow so stay tuned yes thank you everyone bye thank you