Varad
The majority of our SAP clients deploy their customized SAPUI5 apps onto Fiori Launchpad; nevertheless, Fiori does not support the creation of an app’s own login page. However, just as no two fingers are alike, not all clients use Fiori Launchpad; instead, some need a unique log-in page for their in-house apps, complete with a theme that embodies their brand identity. As SAPUI5 developers, it is our responsibility to maintain the client’s brand image while creating a theme that is elegant, sophisticated, and light.
Since the login page serves as the only point of entry for any standalone application, today’s lesson will teach you how to create a stylish login page for your SAPUI5 application using the third-party CSS libraries listed below.
- Make CSS animate
In the event that you require an animation effect, this third-party CSS library has a lot to offer.
- W3-CSS
Suppose you have to apply a grayscale effect to a specific colored image. After that, you must write the code below.
| <Image src=”image.jpg” class=”w3-grayscale-max” /> |
We recently learned how to use third-party W3-CSS and Animate CSS libraries. We can now start creating our login page.
To create an image similar to the one below, all we need is a stunning background image or color with a logo inside a login user form where users may enter their credentials. This is how it appears on various gadgets.
Now let’s create the login form step-by-step:
Step 1: The image in the background
| <Page title=”” showHeader=”false” class=”w3-backGround” enableScrolling=”false”> |
Below is the content of the custom CSS class
| . w3-backGround { background-image: url(“your_image_path_here”); } |
Step one is completed. Let’s proceed.
Step 2: The application title in the middle
How can the text for the app title be centered? We require one empty container, such as a VBox.We will use the w3-css class below to compel content to be center aligned.
Together, the W3-CSS classes w3-row, w3-display-middle, and w3-card-1 will ensure that all of the content within the VBox is responsive and centered.
You will get a larger text-size that fits the title if you use the w3-xlarge css class.
Two CSS classes from animate css that provide fading animation effects are animated and fadeInUp.
| <VBox class=” w3-row w3-display-middle w3-card-1″> <Text text=”My Warehouse Manager” class=”w3-xlarge animated fadeInUp” style=”font-style:bold;font-family: arial, sans-serif; font-weight: 600;”> </VBox> |
Step 3: The Panel with Rectangular Shape and Rounded Corners
The next thing we’d want is a rectangular panel container with rounded corners that holds the submit button, login and password fields, and logo.
A rectangular panel with a rounded edge will be displayed by the code below.
| <VBox class=”w3-container w3-border w3-round-xxlarge w3-margin-top w3-center”> |
Step 4: Contents of the Login Form:
The form’s components, including the logo, username, password fields, and submit button, will be our final focus. There is no rocket science involved; this is basic. The CSS classes listed below will handle that.
I’ve applied the same rounded corner style to the password and username fields. To preserve consistency throughout the app, even the parent panel retains the same appearance and feel.
| <VBox class=”w3-container w3-padding-10″> <Image class=”w3-margin-top w3-margin-bottom” src=”logo_here.png” /> </VBox> <VBox class=”w3-container w3-padding-10″> <Input value=”John.Carter” placeholder=”User name” class=”w3-input w3-border-0 w3-round-large” /> <Input type=”Password” value=”abcdef” placeholder=”Password” class=”w3-input w3-border-0 w3-round-large” /> <Button class=”w3-btn w3-ripple w3-border-0 w3-round-large” text=”Login” press=”navigatePage”/> </VBox> |
We are done and our login page looks like the below in an i-Phone 7 device as tested in the chrome emulator.
That’s all for now, folks. I promise to return with another insightful advanced SAPUI5 essay soon. This one will be about creating custom icons in SAPUI5. Stay alert, stay secure, remain resilient, stay inside, and have fun with your design.
Read Our blog here:-
Learn how to update function modules in SAP ABAP easily
Landing Your Dream Job: The Ultimate Guide to SAP MM Consultant resume 3 years experience
