Hello, last video, I show you how you can create a JavaScript function simple JavaScript function and how you can call this function from one of the ADF component. In this video, I will show you how you can control some ADF component inside your pitch. I will start with I've been in splitter, independent splitter splitter, as you know, to split the page into two parts. So maybe sometimes you won't once as a user, use some or use some component or will start working in this side, you want to collapse this automatically for him so that we'll see the white screen. In this case, you can control the collapse of the panel splitter using a JavaScript function. So let us know create a function here which will control the cooling The color of the panel splitter.
So, this function will get the bundle splitter component using if page should be it should find component and gives the ID of zap and splitter. So, if you go to the splitter Here you'll find ID is p s one. So, I will send the beat this one here is that case this is will return my Benelli splitter component zip from the this component I will call get property and I get the collapse collapse poverty and I check if it is false make it true and if it is true, make it false. It means this function will it change once it is this function is called it will check the status of the bender splitter. If it is not collapsible, it will collapse it if it is collapse it it will open it so, it will change the status of feminism it says For example, this is an example.
Okay. So, let us now try to call this Calypso function we can No need now to display alert here. So let us call this control panel splitter color nap. Okay, and instead of calling display alert function I will call collapse it this. Okay, so now, once all he calls his notes, I bought the mouse all the click once I clicked because the ultimate click I click on this in particular, it will call function called collapse lbs. And this function will get my bundle splitter and they change the color property of the bundle split.
Okay, so this is now refresh the page and see if it will work. If you make a change in JavaScript in the page, no need to run again. just refresh the page. So here once I Britten's this, you'll find it automatically collapse is administrator. If I bearish again on it, it will open. See.
So now you can control the Benelli split or collapse it poverty once you click on the input text. So this is one of the things that you can control. The second thing I need to talk about it is beneficial. As you know, a bunch of groups wrote two, two main layout. One is horizontal versus vertical. So if you want to control the horizontal or the vertical using JavaScript, you can control this benefit group layout.
But it will be out you can control it see out in the JavaScript. So let's create a function which control the layout here. This is will be horizontal, the We will make that Bennett globally our horizontal and this function will make the Bennett globally out vertical. So you should just descend the Bennett Rubio component ID here. So I will go to my Bennett group do it. This is we'll call this ID and I will base it here and here which is okay.
So now I need to call this vertical and horizontal we can use this we can call this H the output and this would be the, the hour and let us insert a line listener inside this and the client listener inside this and each layout will call this function once the user clicks on it, same the will do it. I will call this function once a user, click on it. Okay, so now once the user click in each the hour, it should make bending globally with horizontal. If I right click on this it should make it vertical and the boots are brought on as a vertical way. So let us now save and refresh. Okay, it is now horizontal.
So once I press it, nothing will happen. We massacred him as well. So, some ADF component if you want to deal with the component in JavaScript, you should sit the client component property to be true. Okay, so now, what I try to get this panel group layout is the JavaScript here. But this component I can't get it in this way. So I have to To set the client component to be true.
So in case if you wanted to try to get a component in your pitch by using a base would be to find component and you'll find this component is not returning or not identified. How you can use this. You can simply splices, you can right here alert and you can display the component see what actually is this component it's returning something or not. Okay, you can just simply finish this procedure, you can return on an undefined so it means you can see this component. In that case, you can select the def component and go to the client component and set it through. Okay, let us remove this alert.
And try it again. As you can see now in the V, V layout, it become vertical. If I press here become horizontal, vertical, horizontal, as you can see. So now we can control the bending group layout if it is vertical, or if it is horizontal using JavaScript function. In my example, I just use a click, you can do whatever you want. Maybe if you want to say if I want to double click here, I need to change double click here you want to change so in that case, you should change change the client listener instead of click, you can say double click.
So double click it means once I double click, it will change. So here's currently now if I run this, it didn't change. If I press it didn't change it. Double click it will change Click let's double click, it will change. So you can control calling the JavaScript function by anytime as you want from your ADF application. This is how you can control Bennett grumbly and Benelli splitter using JavaScript Nick is the video I will go to, to make some changes in how to use JavaScript in some other situations.
So see you in activity.