Using custom functions and code editor using-functions-and-code-editor

Transcript

In this video, we will take a look at using custom Functions to populate a Drop-down list, of an adaptive form. So what I have here, is a simple Client Library, which has this particular Function, which returns meeting, list of county names. This Function is in this Client Library called Helpx whose categories is set to Helpx here. Now to use this Client Library in adaptive form, we need to associate the Client Library with our adaptive form. So, to do that, I open up the Form Containers configuration properties.

I open up the Form Containers configuration properties here, and make sure you put in the Helpx category. That agreed that we’re associated with our Client Library over here and save your changes. The next thing we need to do, is to, select the appropriate field, where you want to, use the custom Function. So here I select my Drop-down list. Open up the rule editor here and click on Create.

So always whenever you’re in the rule editor, make sure you have the Form Objects and Functions, tab open here. So here I need to select, the option. Which allows me to set the values of a particular Drop-down list. So here I select the Set Options Of. What county do you live in. And the property here is to be a Function Output, so we need to make a call to a Function. So I tap to this Functions tab here and there are some out of the box Functions and some are custom Functions for example, Get-County-Names-List is a custom Function that we saw earlier. So just drag and drop that over here. And at runtime. Adaptive forms will call that custom Function and populate the Drop-down list, with the values returned by that particular custom Function. And then I do as it’s Done here. Close and to see the form in action, here’s all do Preview.

Tap to my People, and if you open up here, you should see this, the values are in fact returned by our custom Functions call, and those are getting populated in my Drop-down list. -

Transcript

In this video we will set the summary title of this particular panel. By default the name of the, the summary title of this panel is set to asset. And we need to change that dynamically based on the type of asset and the value in dollars that is entered in this particular field. So to do that, I’ve selected the panel. I’ll open up the rule editor. Click on the create, to create a new rule. So by default the visual rule editor opens up here. But in this case we want to use the code editor to create a rule. So once we open the code editor, click on the edit code and click on the edit here. And select the appropriate event type which is going to be the summary. And we delete this default code that is entered here.

So that this code editor is pretty powerful. It has all the complete capabilities. For example, if you want to select this particular field called type of asset. And the moment I select the title of the field it gets replaced by the name of this field here so the drop-down list, this number is actually the name of this field, which whose title is type of asset. And then we have this auto-complete capabilities which shows you the various properties which are available for this particular type of component. So this is the code editor and the code that we write is like this here. So basically we’re going to test the values of the type of asset and the value in dollars, it is not equal to none. Then we concatenate those two values and put a dollar sign in the middle, and then we save our rule here. And this is how it saves. So now lets take a look at the preview to see how that rule is going to behave at runtime. So I’m going to do a preview. Go to my assets type. So this is the default title and then I want to change it. So if I put in cash, five thousand or five thousand dollars and tab out, you can see here it dynamically changed to the type of asset, with the dollar sign and the value in dollars field here. So, if I want to do it for the second panel here. I can do stocks and then say, four thousand and the type only shows this way. So this makes it easier for you to identify the particular panel here. And this is how you would set the summary title of a panel using the code editor.

Transcript

In this video we will take a look at validating the fields on the panel when the Next button of the toolbar is clicked. To test our user case, we’re gonna make these fields under the Your Details panel. Your Name and the Marital Status is required. To mark a field as required we simply open up the fields Configuration Properties and set this checkbox of required field. Now that our fields are set as required, let’s take a look at the default behavior. So I open my form here, refresh it, I click on the Next, to move to the next panel and this is the panel where these two fields, Your Name and Marital Status fields are required. I click on Next. There is no validation error and I’m allowed to navigate to the next panel because there is no code associated with a click event of this Next button here. To associate code with the click event of this Next button, I will open up the rule editor of this Next button here. As you can see there is already some code that is associated with it, but it is disabled. So, let’s take a look at this particular code and what it does. So the first line in the code is to enable the debugger we recommend you to remove this when the form is in production. Line four gets the currentPanel using the out of the box APIs, and line five gets all the errors in that particular panel, and if there are errors we look through those errors, create a meaningful message and display that message using the window.confirm matter. So let’s enable this particular code here by clicking this Enable button. We close our form and then run the form again to see the behavior at random. So here I click on Next, I’m gonna enter which country do you live in and then not enter any values in the required fields and try to navigate to the next panel and sure enough you get this message here, Your name, please fill out Your Name, Martial Status fields. Click on Okay, it also highlights the fields which are required but are not filled in. So this is how you would validate fields on a panel using the out of the box APIs.