[MUSIC PLAYING] In this video, we'll demonstrate how to add a big red terminate button on the personal user data page. First, we need to find a component to modify, so we'll plug into the portal, find the person in the report, and we would like to add a button somewhere here. So this we right click on the Save button, Inspect, and find this button's identifier. Select Identity button, Save. Copy, and go to Visual Studio. Find the components.
And here is the HTML file. We can see a menu, a three dot menu. Right next to it was all its buttons. And here's also a component. And we can tell it's all are all parts of QER library. Static library QER.
Now let's start debugging. First we need to compile a QER component in the debug mode. [INAUDIBLE] terminal [INAUDIBLE]. And run the command. [INAUDIBLE] is built. [INAUDIBLE]. Portal. Portal is running. Let's run our local API server. And now it's running, and we can start debugging. [INAUDIBLE]
And this is where we want to place a terminate button. Let's add a terminate button. We have this button in the code. Files distributed. We'll place it right above the Save button so it will appear in between Menu button and the Save button. We can see that on this button's click, it should execute the terminate function. And right now it cannot compile because there is no Terminate Function function. Let's switch the component and create one so that we have a-- distribute this file. [INAUDIBLE]. Here is the function.
It doesn't really matter where we place it. So this function gets selected identity, which is the person selected in the reports list. And we use confirmation service as one of the services we use in the portal to confirm which will pop up. Like, a text box with a question and yes/no answer. And question says, Terminating Identity as a title, and the message saying Are you sure you want to terminate? And then the selected identities entity get column central account and the question mark.
And if the user answers yes, then we just hit Selected Identity and its inactive attribute property, and set its value control. And then Entity Commit to save it. Now everything is compiled. We can try to see what appears. Select the user. And here it comes with this button. Let's verify that the user is not deactivated. So this is the active user.
We should go to breakpoint to see what happens when the user clicks on terminate button. Click on Terminate, and here we hit the breakpoint. [INAUDIBLE] you can look at the entity. Columns. First name. [INAUDIBLE]. So there's a [INAUDIBLE]. Perhaps that's why you continue to the pop up box. Terminating Identity. Are you sure you want to terminate the [INAUDIBLE]? Let's say yes. And it jumps to the next breakpoint inside of the equation.
When we hover over volume, it shows that it is false. Press F10. It jumps to the next line, and we check it again. Now it says that is inactive equals true in the little pop up. Entity commit. Pressing F10-- it goes to the next step. Make sure it's committed. And skip other steps. It closes the spreadsheet.
Now, if we click on the same user and open it, we still see a Terminate button. But inside the organization information, it says that Identity is permanently deactivated. But we still see a Terminate button, and we can try to terminate it again. So we need to do something to not display Terminate button when the person is deactivated.
There is a nice Angular command called NGE, and it allows to hide or display parts of HTML [INAUDIBLE] based on the value. So here we will add a command here, NGE. And look data, select that entity is inactive [INAUDIBLE], meaning, if it's inactive equals false, then we'll display Terminate button. Meaning if the account is active.
data.selected identity is the same as in here. This.data.selectedidentity-- This is a local variable data, and the selected identity is property of it. And HTML can see the same exact local variables as TypeScript file can. So here we'll put this value, and everything is compiled again. Let's see if the button will be hidden for the disabled persons. [INAUDIBLE], and the button is hidden. Some other person, and the button is visible.
Now, the only thing left to do is to display Enable button when the account is-- when the identity is disabled, will display a button to re-enable it. And we'll do the same thing, just in reverse. We'll take another button, and the button is a regular column-- I mean color versus color warmth in the Disable button. And here is the same data. Selected Identity is an active value, accept that it is true.
If account is inactive, then it will display this button. When it's [INAUDIBLE] inactive, it will display Terminate button. The button will say Re-enable, and it will call function un-terminate. Let's get function un-terminate. It's pretty much the same as terminate, just opposite. Right under Terminate we paste it. If we wish to terminate, we will say, set if inactive value equals true. Here we will set if inactive value equals false. And that's pretty much the only difference.
And now, everything's compiled. We'll go again to [INAUDIBLE]. And one more conversion. So we can see the Re-enable button, and if we click on it, [INAUDIBLE]. Now user is enabled. Terminate it? Yes. [INAUDIBLE] becomes disabled. Re-enable. Works wonderful. To deploy these changes to the production server, we need to compile the portal, and then upload it to the server. QER component, since it's a static component, it doesn't get to be deployed.
In this video, we will demonstrate adding a base plugin component. It will be a simple component with minimum functionality. It will be presented on the web portal's dashboard, and contain a logged-in user name. And on click, it will just pop up a little message box with username. With logged-in username.
First we need to find an NX console extension in Visual Studio. It's right here. We click on it, click on Generate, and find a library. Next, we need to put the name of the new plugin component, like "sample.plugin," and we need to change couple of entries here. For example, public API should be public_API because it's the same as in all other components.
And instead prefix instead of [INAUDIBLE], we'll put IMX, which is also the same as in all other components. We don't really have to use the NX console. We can run NG generate command, and it shows us-- Visual Studio shows us which command it will run when will click on the Run button. It just makes our life easier. We'll click on run, and it's generated. We'll switch to explore, and we see a new sample plugin component.
Now we need to add some files to this new module, and the easiest way to do this is to copy them from RMS or RPS components and modify it so that everywhere there is name RMS used, we'll just put sample plugin instead. These files are imx.project.json. The ones that we need to copy-- imx.plugin.config.json, ng.package.dynamic.json, ts.linked, and ts.config.leapfrog.json. These five files need to be added, so we just copy them and paste into sample plugin.
Also, we need to modify Angular JSON file. There is a new sample plugin entry here, and we just need to add a couple of lines. First we need to add under project name, "sample plugin architect build configurations." So architect, build, configurations. We need to add one more configuration, dynamic configuration, and change project name to sample plugin.
Also, under "sample plugin architect build options," we need to add one more option. And also change project name to sample plugin. Prefix is IMX, which is correct. Now we need to change also "global.file.gs.config.json, and we see there was an entry added for sample plugin. We just need to modify it so it looks like all the other modules' entries.
So here we're going to move this, and create one with a star. Now, let's change files we just copied. And also, the generated files-- also, some of them need to be changed, so let's go one by one and change them. imxproject.json. Everywhere we see our RMS, we change it to sample plugin. And we just copy it for the future.
RMS. RMS. Ngpackage.json. It's already correct. ts.linked.json doesn't need any changes. File imxplugin.config-- we need to change it. So here for container, we put sample plugin, and here is the name of the module in our new component. We click on the sample plugin module file, and here is the class called "export class sample plugin" module. That's what we copy, and place it into this file. This file, when it's placed in the right container, tells the loader to load this component dynamically when the portal starts.
Next, we need to create a folder in the Installation Directory of One Identity Manager IMX Web. So it's right here, One Identity Manager, IMX Web. And we can see all these folders with the names of the modules. We need to create a new one for our new module. New folder, and it's called html_sampleplugin.
And we need to place this file, imxplugin.config. You can see imxplugin.config are in all of these folders. [INAUDIBLE] File Explorer, copy the file, and place it into the HTML sample plugin. Then we edit it. Sample plugins, sample plugin module.
Now we need to modify ts.config.libprojjson. We need to modify this file. We need to remove this LAN compilation mode partial, and instead of it, add the [INAUDIBLE] enable IV. It was true. Now configuration files are copied and modified, we can start modifying the code.
All the modified code is supplied in the ad-based plugin component folder under Modified. All modified files are here. First, we need to modify module. This is the main component here inside of our class, and this code. It has a constructor, and sample plugin service is being passed to this module in the constructor, and that's a job of Angular framework. To pass a service to any module or another service or component, we just mention it in the constructor, and Angular framework will pass it to us.
We need to fix this error line with quick fix. It says import sample plugin service, which is correct. We just click on it. Under NG module imports, we need to add the tile module because this component will appear as a tile. So we will use this module with quick fix. We import from QBM, and we can change the QBM/QBM to just QBM.
And now we see, only one error left is on INIT. So we see sample plugin service. Initialize of type of sample plugin service. And we'll call function on in it, but it doesn't exist yet, so we can edit there. This is our sample plugin service. We add the entry in the constructor. This extension service, the XD service, is used to register a component as a tile on the dashboard, so a quick fix.
Import, and we need to add an on INIT function. The function that module will call. And this is how we register the component as a tile on the dashboard. And we need to just fix our imports. Now we can start modifying component, and Angular HTML part of the component can be either inside of the TypeScript file in form of template like we see here, or it can be in a separate file. We'll create a separate file for our demo here.
So [INAUDIBLE] to create new file. Sampleplugin.html. This file should have an HTML extension. Copy some HTML here. And pretty much, this HTML represents a tile on the dashboard and it has a caption, and this is the variable inside of TypeScript file. These are all variables that HTML part of the component can see. And also, on click, it will call the [INAUDIBLE] click operation function with some code in it.
Now, we need to modify the actual TypeScript file to put all those values there. First, instead of template, we'll put a template URL. It's just really template, and put template URL, which points to this file we just created. We need to declare all those variables that HTML can see and display. Here are the variables. Caption, description, and action text will be populated later. When this component gets initialized, the logged in username will be placed in it.
We need to add values to the constructor. Request service is used to open up message boxes, and we need to fix the import. And also, IMX session service is the service that contains information about current session, including the logged in username. Quick fix. QBM, and now we just should fix the QBM and QER entries.
Also, on INIT, you should change it so that it logs into the console when the component gets initialized, and we'll see later. And also, it calls the IMX session service get session state. And from the session state, it retrieves username and places it into the action.text. It's the same action text that will be displayed here.
And now, we just need to add the [INAUDIBLE] click operation. It does just request service, open snack bar. It's a little pop up box, and there it will say Hello and logged in username. And there will be a button close on it.
Now all files are modified, and we can start debugging. First, we add the new terminal, rename it to sample plugin, and enter command to run it in a dynamic mode. Same way, we run portal. And we need to run local API server. I know we can run it in debug mode. Let's put a couple of breakpoints. Close all.
First, we'll put a bug in the module. Second, we'll put one in the on INIT of the component, and also in a dual on click operation, and let's start debugging. Click on green button. We can press F12 to see if component was loaded. And here it says sample plugin module initialized, and here we see our message in constructor of sample plugin module.
Now we'll log in, and we can see this new module presented here as a tile. And the logged in username is displayed here, and we can click on it, and breakpoint stops. We saw previously breakpoints also stopped on on INIT during the initializing of the component.
And right now, you can't stop to this break point, so we can look at our local variables, see their values. Action text. [INAUDIBLE] caption. We can see all the variables in this component at this point. And if we press F5 to continue, we'll see a pop up message here. "Hello [INAUDIBLE]." Logged in user, and close button down.
Our new plugin module works, and now we need to deploy it to the production server. To deploy this new module to the production server, first we need to stop debugging. Click on this red button, or we can just close the browser, and it will disappear. We need to stop this processes here. Control-C, yes. Same with portal. Control-C, yes.
And then on sample plugin, we need to run command to build it in a production mode. CPM, run build [INAUDIBLE] sample plugin. Now it's built and it's placed into this folder. You can see it here in this folder-- sample plugin. Right click, reveal in File Explorer. Here's sample plugin. You just zip it to archive, and rename it to html_sampleplugin.
Now, we'll copy this file and place it into the locally-installed API server. Then IMX Web, our custom folder, and we place it here. But we also need to create the same folder we did before with local API server, so we need to-- new folder, html_sampleplugin.
And we need to copy this file-- copy-- this file into it. So in our production server, we'll have the html_sampleplugin with IMX plugin config JSON file with information pointing to the sample plugin module. It tells the loader to dynamically load this module.
And now we can refresh the installed production API server, and see if it picks it up right away. And it did pick it up immediately. Which I'll click on it, and Hello, [INAUDIBLE]. Close button. So our new module is built, debugged, and deployed to the production server.
In this video, we'll modify our sample plugin component we created in previous video. When user clicks on the panel in the dashboard, the side panel opens with user personal information. It's the same information as when the user clicks on My Direct Reports. First, we need to find the component and the method that opens the side panel. To do that, we should run a portal login.
Right-click on one of these direct reports, and click on Inspect. Little bit higher, we see the IMX-style content. Let's do search on that. [INAUDIBLE] studio search, and it finds for us two different locations. One is called function Open Ownership, and another one is one calling function Open Identity side Sheet. So we'll go with the Open Identity Side Sheet.
Now, let's view the component, specifically this function. Here, use this function. This function shows that we get data from QER client, portal personal report interactive, get by ID and pass user ID. We need to copy this function into our sample plugin module and modify it so that instead of direct report ID, we'll send the ID of the logged-in user. And everything else should probably still stay the same.
So here we copy our function, and go to sample plugin, source lead component and paste it here. First we need to remove the parameter from this function, and fix some of the entries. First to get user ID, we need to get the same session state as in the initializer. And we'll place it here, sessionstate.usernewID.
And now we need to fix all these errors. For all these servers, these servers here are client, error handler, side sheet. To get all these services, we need to declare them in the constructor so Angular will pass instances of them to this component. So here they are. These are duplicates, and the rest of them we need to fix with our quick fix.
Now, we need to fix these two. First, this project config needs to be declared. We'll declare it at the top. Here. Then, once initialized, we need to get it from config services. See config service? One of these. Now we need to comment out or delete this line. What about-- we don't need to load direct reports.
Finally, here's Selected Identity, and we'll declare it as a type of portal personal reports interactive. Instead of that, we will declare it as portal person master data interactive. And here, we'll quick fix it. And the method call will be, instead of typeclient.portalpersonreportsinteractive, portal master data interactive. That's it.
So this component grabs the ID from logged-in person from the session, retrieves data from portal master data interactive from the API server, and passes it to our HTML. In our HTML, we just need to change the calling function on-click operation to openidentitysidesheet.
And this is it. Let's try to debug. First, we compile this in the [INAUDIBLE] mode. And portal. Compiled. And now let's run in debug mode. Module is loaded, [INAUDIBLE]. Component was initialized. And when we click on [INAUDIBLE], it stops inside of Open Identity Side Sheet. We need to put a breakpoint and press F5, and we can see the UID of the person, 1003.
And let's go breakpoint here, F5, and we can see Identity collection with all the data-- all the personal data. And press F5, and side sheet opens. Membership and everything. So the only problem is Terminate button.
Remember how we put the Terminate button on the direct reports? The button is still there. So the homework will be to hide this Terminate button when the data displayed is the data for the logged-in user. We deploy this component the same way we did in previous video-- [INAUDIBLE] based plugin component. Just build it, zip it, and place it in the custom directory.
In this video, we'll build a new plugin to display custom data returned from a custom API server plugin. It will also demonstrate both side sheet and full-page components. Remember, our advanced API server modifications which had two methods-- get report rows from script and get report rows from SQL? In the UNITE plugin API server plugin in here, it's deployed and we can see these methods in this slider.
All code for this video is provided in the chapter files add custom plugin call in API server plugin. Initial folder contains a UNITE plugin. It's a base plugin, the same as in at base plugin component video. And then finally contains the complete code for the plugin.
First, we need to build a base component. But to save some time, we have based component here in the initial folder, and we'll just use that. We'll just copy it into our project [INAUDIBLE] File Explorer. Copy this whole folder, and we'll place it right under Projects. Here it is. [INAUDIBLE] plugin, and it appears right here.
We will need to modify Angular JSON to add a UNITE plugin node. It's already populated. And we need to add the entries to jsconfig.json. We'll just copy these two lines and change their names.
We also need to create a folder under One Identity Manager installation Directory IMX Web. Same as HTML sample plugin, we can just copy it and paste, and rename. And we need to replace a file. imxplugin.config.json needs to go there. It points to UNITE plugin.
Let's debug and see if it appears in the dashboard. Run local API server. Rename it [INAUDIBLE] plugin. Stop the premise. [INAUDIBLE] plugin.
Run portal. Portal compiled. Let's start it debugging. And here, we see a new component, new custom data. Click here. Logged-in user can view a list of his reports with assigned business rows. Now we can stop debugging, and start creating new components.
First of all, create a new component displaying data from a script. And then we'll go to NX console, generate, and component. The name of the component-- we'll do UNITE plugin script. Name of the project will be UNITE plugin, and declaring module will be uniteplugin. Click on Run, and we can see the new component here. We can close this window.
Now, we'll start modifying code. First, we'll modify UNITE plugin module, because this is a central place where everything is connected. And you see UNITE plugin script component is already placed here by the generating tool, and we just need to import one thing-- material table module. Because for the script, since it returns data in the regular standard JSON format, we'll be using mat table to display.
Also, we need to change UNITE plugin service. First, we need to add the import type client from IMX API UNITE plugin. This is something that we generated when we did the advanced APN server modifications. Remember, we installed it here in our IMX modules. Here it is. And we're importing it because it contains all the methods necessary.
Here we need to add this code to constructor. You can see we have local V2 client in type clients. And we instantiate them in the constructor using app config service. These two, our standard operations, will need to be done in every custom plugin scenario. We need to instantiate a type client and a V2 client.
We also need to add a method to retrieve data from the gif report rows from script from this method. You can see that this method looks like this in the client. And we need to pass UID person to it. And the component, we'll call this method and pass the UID person.
Next, we need to modify UNITE plugin component HTML. It's already modified. We see that the action click-- it will called a [INAUDIBLE] click operation. In the United plugin component [INAUDIBLE], we need to modify constructor. So we'll pass session service to request service and UNITE plugin service and side sheet service to open side sheet.
On INIT, we'll just retrieve user ID, and action text will be logged-in username. Now we need to modify the on-click operation. This function will open a side sheet and pass to it some configuration and component-- UNITE plugin script component to display. One of the config parameters is data, and we can pass any kind of data with it. In our case, we'll pass the user ID.
Here is new code, and then I plugin script component. We'll quick fix it. We'll import from new component. Now we'll need to modify UNITE plugin script component. In this component, we'll use the material design components for Angular. These are standard components that come with Angular, and one specific one. We'll use math table to display data returned from API server plugin.
Let's go to the [INAUDIBLE]. Let's declare columns to display. My data array is the data that will be displayed. And columns to display-- here, we just need to declare the names of the columns. In the constructor, we need to mention certain things like side sheet service, side sheet reference, UNITED plugin service, because it will communicate with UNITED plugin service to retrieve data.
And also, it gets injected with the data, the one that was sent from the UNITED plugin the component. When we send the user ID, user ID will get here. So let's fix everything with quick fix. And this one.
Now it's all fixed. We need to change initializer in this component. In the initializer, we will grab UID person from the side sheet data and call UNITED plugin service-- the one that's been passed here. And that method we created, get user reports rows from script, and pass UID person to it, and store the return data locally to my data array.
And also, we need to modify the HTML file. Here, we'll have a-- here, we'll have a button, but we're not going to use it right now in this step. Here we have a math table with list of columns, and each column retrieves the-- data source of this column is my data array from here. This is the source for the table-- data source for the table. And then from each element, it retrieves the value and puts it in the cell or the table.
First name. All columns are here. And [INAUDIBLE] points to the columns to display, again, in here. And there is a sum definition. But this is a vanilla math table usage. The simplest way to display data. Now let's try to debug it.
Compile plugin, UNITED plugin portal, and let's start debugging. I'll just remove all breakpoints and [INAUDIBLE] custom data. Here, we see a custom data. It works. Actually, let's put a breakpoint and try it again. We'll see the form of the data is returned. So let's put breakpoint here when the data is loaded, so we can see in which format the data is returned.
And we can see rows, local/variable, and it shows us records in a regular JSON format. So each row consists of basically columns and their values.
Now it's time to add another component, so I need to stop debugging. [INAUDIBLE] here. New component will open a full page in the portal. Instead of this one, it opened a side sheet. And to do this, we'll need to use Routes. It's a part of the Angular framework.
This component will be used to display data from the API server, the custom method that is using the predefined SQL. It will return exactly the same data. It's exactly the same SQL as the previous one, except that it returns data in the specific format. And we'll see further the data.
And again, we click on NX console, generate. We select component, give it a name. UNITED plugin SQL. Name of the project-- UNITED plugin, and the name of the module-- unitedplugin.module. And we'll click [INAUDIBLE]. And here, we see a new component when I plug in this SQL. Already generated. We can close that NX console. Close all.
Now we need to modify some components created previously, and also these new generated components. So first, we'll go with UNITED plugin module into our central place. We need to declare routes. This path will point to our new component, the UNITED plugin SQL. It will redirect to this component when it's called.
We need to change declarations. We already have UNITED plugin SQL component. We need to change our imports. On top of tile marginal and math table modules, we need to add more. First, we need a outer module, because we will be routing to a component. And we also import data source toolbar module and data table module these are our portal custom components.
We also need to pass these declared routes to our UNITED plugin service during initialization. So we need to go to the service and add this parameter. In the UNITED plugin service, we just need to change the whole unit to accommodate our routes. There's a new function called Add Routes. I just copied it from another component.
Next, we need to add a method to retrieve data from SQL method. And also, we have two more methods. One to return data from the API server, and another one is to return a schema. And a schema will be used in our table component. Please notice that here in these two methods we use type client instead of V2 client we used for the script method.
They're all declared here and initiated here in the constructor, and these classes are automatically generated when we created our API server plugin. We need to also add a button to our UNITED plugin script component, the one that opens the side sheet. We'll click on that button and it will redirect us to this SQL component. So here, somewhere at the top, we'll just add the button. And this button on a click allows you to navigate the SQL component function.
And here, we need to do some changes in the UNITED plugin script component type script. First, we need to declare routes. And we need to create a function navigate to SQL component. Sorry, I declared routes outside of class.
And now we can start making changes in the UNITED plugin SQL component. First of all, our declarations. [INAUDIBLE]. And we need to change QBM/QBM to just QBM. Changes in constructor. You see all familiar services here, like AMX service. Change the on INIT.
We retrieve user ID, we retrieve rows, we retrieve schema, and then we create the displayed columns based on the schema. And method to call-- to get the schema is automatically generated, so we didn't have to do anything on our API plugin side. And we just passed all of these settings, including display columns, to our GST settings, which will be a data source for our table.
And we need to also add the method to navigate to the start page. So this is a standard method used everywhere. And the last change we need to do is change the HTML file. First, we need to add the data table. Actually, it's both toolbar and the data table, and they're connected to each other.
And this is the GST settings. We'll create it here in the on INIT function. And this is like the simplest way to display data using our standard portal components. Also, we need to add a button to redirect us to the start page-- to the dashboard, pretty much. And this button calls the Navigate to Start Page function. This one. And it just takes back to dashboard.
We can try to debug. We'll run UNITED plugin again from portal, and we can start debugging. New custom data. It opens our plugin script and displays our custom data. And here is a go to SQL component. Let's click on Go to SQL component, and we get [INAUDIBLE] properties of undefined [INAUDIBLE] navigate.
So we have router navigate, and to be sure, I declared router as a separate variable. Actually, we need to pass it in the constructor so it's instantiated and loaded by the Angular framework. Let's wait until it re-compiles, and we'll try it again.
[INAUDIBLE]. Displays script data with the SQL component. And here it shows the same exact data using predefined SQL and our own data table component. And if we click on Back to Dashboard, it will return us to the dashboard. So let's put a breakpoint just to see data in the form of the predefined SQL returns.
So that will go to SQL component and put a breakpoint here after we retrieved the rows. Go to SQL component. It stops on breakpoint. And let's see what rows look like. So if we change the same 20 rows, each row consists of a lot of data.
Entity columns-- it has all these columns, and the column consists of data, and data shows is the only value. So it's a lot more complicated data structure, but it allows to do a lot more things with it. But math table is a really simple way to display data.
This data with toolbar allows you to do sorting and filtering and other kind of things. Just need to pass the right parameters to it. So it's up to you to make a decision on which table to use-- the one that's simpler to use, or the one with more functionality.
So, our component is running, our plugin is running. Both components work. And to deploy it to the API server, the production, will need to follow the same steps as in previous videos. Thank you.
[MUSIC PLAYING]