1. From the app design page, click the Application module card, which automatically opens the view design page for the first view in the VIEWS list (default: login). If another view is first in the list, select login from the list of views to open the login view design page.
2. You can edit the following properties of the login view:
Header Title: The text that appears between the top and middle custom HTML sections.
Logo: An image that appears next to the Header Title. Enter the name of the file here, and place the file itself in application-folder\artifacts\images.
Username Label: The text that appears above the box for app users to enter their usernames.
Password Label: The text that appears above the box for app users to enter their passwords.
Events:
Login Event Function: The name of a JavaScript function that runs when the user clicks the Login button (default: onLogin).
You must add custom code to this event function to send user credentials to an authentication service that authenticates the user and returns the user's roles (see the information on Roles in App design page ). Note that a user is authorized for a given app role only if the authentication service returns a role that has been defined in Kendo UI Builder. You must ensure that the role names that you define in the app design page map to corresponding roles defined in the authentication service. To see an example of custom code that uses an authentication service defined in OpenEdge, see TBD.
Any custom code for this event function must be included in the file, application-folder\app\src\modules\Application\login\controller.public.js. For more information on custom code and event functions, see the sections on extension points and source code customization in Kendo UI Builder by Progress: Modernizing OpenEdge Applications.
This view also includes the following custom HTML sections where you can include your own HTML for the view. Each section is identified in the view design page with a placeholder containing descriptive text:
Custom top html section:: Located in the area above the Header Title, the text in this placeholder introduces the path name of the topSection.html file where you can add your custom HTML.
Custom middle html section:: Located in the area below the Header Title but above the Username Label, the text in this placeholder introduces the path name of the middleSection.html file where you can add your custom HTML.
Custom bottom html section:: Located in the area below the Password Label, the text in this placeholder introduces the path name of the bottomSection.html file where you can add your custom HTML.
The Designer automatically generates these files for you in application-folder\app\src\modules\Application\login. Add your custom HTML code to these files as required. The Edit option on each custom HTML section allows you to edit the corresponding file from within the Designer using the Monaco editor.
Header Title: The text that appears between the top and middle custom HTML sections.