3. From HTML controllers to Fundamental Styles
In the previous post, we had a quick look at how to build a web form in plain HTML. Although HMTL doesn't require any coding experience and it is easy to work with, it doesn't give many options when it comes to styles. Styles help with keeping the formatting consistent and display pleasant user-friendly web content. CSS is one of the most commonly used languages for styling. It has easy usage and it is independent of HTML. One of the disadvantages of CSS is that it inquires patience and time to create a compact overall look for all of the controllers. To cut ourselves some slack, we are going to style our web form using Fundamental Library Styles.
Fundamental Library Styles is a lightweight presentation layer that helps build consistent SAP Fiori apps in any web-based technology; Angular, Vue, React etc. For further information on SAP Fiori check the SAP Fiori Community. In this blog post, we are going to use Fundamental Library Styles in web form built on plain HTML.
Prerequisite:
Basic understanding of HTML.
1. Install Fundamental Library Styles
The very first step in styling our HTML web form is to install the Fundamental Library Styles. A step-by-step set of instructions is posted here.
2. Follow the Documentation
After we have installed the Fundamental Library Styles in our project, we can start implementing the style by adding the specific classes for each HTML controller. Each HTML controller corresponds with a Fundamental Styles component.
Example:
The code below is the input controller of the first name in HTML, followed by how this code is represented in the web browser. As we can see, there is no style implementation, just the structure in HTML.
We can change the whole presentation in the web browser and add a modern SAP Fiori look by simply adding the
Form Group: The form group is used to group the two parts of the form; personal information and secondary information. Elements such as first name, last name, email, password and repeat password are wrapped in the first group container and the rest is grouped in the secondary information.
Form Header: Headers are used to give a title to the two columns of the form. In order to extract the SAP Fiori styles we add
Input: It is used specifically in the first name, last name, email, password, repeat password, birthday, country and favourite ice cream. Each item is wrapped in
Radio: It is used to create the gender pick in the web form. We add the
Textarea: It is used to create the short bio. In the textarea HTML controller, add the
Checkbox: It is used in the last part of the form, in remember me. To implement the SAP Fiori look, we add the
The code for the web form in HTML styled with Fundamental Library Styles can be found on Github and the deployment of the code here.
The implementation of Fundamental Library Styles not only gives the web form a modern SAP Fiori look but also makes it easier for the developer to style the web form. Another advantage of using Fundamental Library Styles is that there is no prior knowledge needed to use the library. The styles are added to the HTML controllers through classes. The only downside to the implementation of Fundamental Library Styles in HTML is the fact that it increases the lines of code as there are different classes for different components added in the HTML controllers. In the next blog post, we are going to check how to overcome this issue and reduce the amount of coding by implementing the Fundamental NGX Library.
For further information on Fundamental Library Styles, follow the Fundamental Library Styles Community. If you have any questions feel free to post them in the comment section below or in SAP Community Q&A.
Fundamental Library Styles is a lightweight presentation layer that helps build consistent SAP Fiori apps in any web-based technology; Angular, Vue, React etc. For further information on SAP Fiori check the SAP Fiori Community. In this blog post, we are going to use Fundamental Library Styles in web form built on plain HTML.
Prerequisite:
Basic understanding of HTML.
Getting Started
1. Install Fundamental Library Styles
The very first step in styling our HTML web form is to install the Fundamental Library Styles. A step-by-step set of instructions is posted here.
2. Follow the Documentation
After we have installed the Fundamental Library Styles in our project, we can start implementing the style by adding the specific classes for each HTML controller. Each HTML controller corresponds with a Fundamental Styles component.
Example:
The code below is the input controller of the first name in HTML, followed by how this code is represented in the web browser. As we can see, there is no style implementation, just the structure in HTML.
<input type="text" placeholder="Enter First Name" name="first_name" id="first_name" required maxlength="32" pattern="[A-Za-z]{1,32}">We can change the whole presentation in the web browser and add a modern SAP Fiori look by simply adding the
fd-input class. The figure below shows the transformation of the input controller.<input class="fd-input" type="text" placeholder="Enter First Name" name="first_name"id="first_name" required maxlength="32" pattern="[A-Za-z]{1,32}">Form Group: The form group is used to group the two parts of the form; personal information and secondary information. Elements such as first name, last name, email, password and repeat password are wrapped in the first group container and the rest is grouped in the secondary information.
Form Header: Headers are used to give a title to the two columns of the form. In order to extract the SAP Fiori styles we add
fd-form-group__header-text class in the header controller <h2>.Input: It is used specifically in the first name, last name, email, password, repeat password, birthday, country and favourite ice cream. Each item is wrapped in
fd-form-item which is composed of the fd-form-label and fd-input class with an exception for the dropdown values of the country and favourite ice cream which have an addition fd-input-group__inputclass.Radio: It is used to create the gender pick in the web form. We add the
fd-radio in the input controller and to present all the options in one row, we wrap them with fd-form-group--inline.Textarea: It is used to create the short bio. In the textarea HTML controller, add the
fd-Textarea class to get the SAP Fiori style.Checkbox: It is used in the last part of the form, in remember me. To implement the SAP Fiori look, we add the
fd-checkbox is-information class in the HTML input controller. The code for the web form in HTML styled with Fundamental Library Styles can be found on Github and the deployment of the code here.
Conclusion
The implementation of Fundamental Library Styles not only gives the web form a modern SAP Fiori look but also makes it easier for the developer to style the web form. Another advantage of using Fundamental Library Styles is that there is no prior knowledge needed to use the library. The styles are added to the HTML controllers through classes. The only downside to the implementation of Fundamental Library Styles in HTML is the fact that it increases the lines of code as there are different classes for different components added in the HTML controllers. In the next blog post, we are going to check how to overcome this issue and reduce the amount of coding by implementing the Fundamental NGX Library.
For further information on Fundamental Library Styles, follow the Fundamental Library Styles Community. If you have any questions feel free to post them in the comment section below or in SAP Community Q&A.
- SAP Managed Tags: