Open Source Blogs
Immerse yourself in SAP open source! Discover collaborative projects, insights into the latest technologies, and best practices in open source development.
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member786693
Participant
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.

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

Fundamental Library Styles comes with comprehensive documentation and example code. For this post, we will focus on the components which have a list of all the components; calendars, cards, input, forms etc.


3. From HTML controllers to Fundamental Styles


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}">



For the transformation of the whole form, we used:


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.
Labels in this area