Web Form in Fundamental Library Styles

In the previous post we had a quick look on 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 much options when it comes to the styles. Styles help with keeping the formmating consistent and display a pleasant user friendly web content. CSS is one of the most commonly used language for styling. It has an easy usage and it is independent from 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. In order to cut ourselves some slack, we are going to style our web form using Fundamental Library Styles.

Fundamental Library Styles is a light-weight presentation layer that helps building 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 into 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 a comprehensive documentation and example code. For this post we will focus on the components which has 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 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 in order 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 in order to get the SAP Fiori style.

Checkbox: It is used int he last part of the form, in remember me. In order to implement the SAP Fiori look, we add 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 it 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 in order to use the library. The styles is added to the HTML controllers through classes. The only downside to the implementation of Fundamental Library Styles in HTML is the fact that the it increases the lines of code as there are different classes for different component 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 Fundamental NGX Library.

For further information on Fundamental Library Styles, follow the Fundamental Library Styles Community. If you have any question feel free to post it on the comment section below or in SAP Community Q&A.