31479cfaa4
* [ADF-4152] Moved proc services cloud docs to subfolders * [ADF-4152] Fixed links in PS cloud docs * [ADF-4152] Added subfolders and checked links for extensions and insights docs * [ADF-4152] Moved proc services cloud docs to subfolders * [ADF-4152] Fixed links in PS cloud docs * [ADF-4152] Added subfolders and checked links for extensions and insights docs * [ADF-4152] Fixed links in Proc cloud, Insights and Extensions docs * [ADF-4152] Updated links in user guide * [ADF-4152] Fixed broken links in tutorials * [ADF-4152] Fixed remaining links in core docs * [ADF-4152] Fixed remaining links in proc services docs * [ADF-4152] Fixed remaining links in content services docs * [ADF-4152] Fixed links in breaking changes docs * [ADF-4152] Updated main README index page * [ADF-4152] Fixed glitches with preview ext component docs
2.1 KiB
Title, Level
| Title | Level |
|---|---|
| Customizing the Login component | Intermediate |
Customizing the Login component
In this tutorial you will learn how to customize the Login component following the technical documentation.
The task will be very simple. See the documentation for further details about customizing this component, along with examples.
Locating the component into your application
Starting from an existing ADF application, the Login component, like any other component, is stored in a subfolder of the app folder. In the
Alfresco Content App
it is stored in the /src/app/components/login path. In an ADF app created with Yeoman
it is stored in the /src/app/login path.
Once you have located the Login component for your application, you can customize it as described below.
Changing the header
As with every regular Angular Component, you can customize the Login component can be customised via CSS, HTML and Typescript. In this simple example, we will customize the header (as described also in the technical documentation).
Open the login.component.html file and change the content to match the following source code:
<adf-login ...>
<adf-login-header><ng-template>My custom HTML for the header</ng-template></adf-login-header>
</adf-login>
After saving the file, the login form will look like this:
More examples
As mentioned earlier, this is a very basic example and the Login component can be customized much more extensively than this. For a complete and detailed description, full of examples, check the technical documentation about the component. This describes every customization available for the Login component.