Implementing Salesforce Custom Base Lightning Web Components to increase consistency
Fronden, Chuse (2022)
2022
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2022120125440
https://urn.fi/URN:NBN:fi:amk-2022120125440
Tiivistelmä
The reasons to implement custom base LWC are that Salesforce provides the library of base components and references that developers can use, so it saves time. The problem with using these base components is that the base designs are limited to change. If a customer wants a new design that is different than the default Salesforce design, the problem here is that developers have to make their own components in their own way of coding. This means the websites won’t have consistency and bad usability. To solve these problems I had two goals that I aim to achieve in my thesis, which are:
1. Implementingthecustombaselightningwebcomponents(LWC)successfully 2. Byimplementingthecustombaselightningwebcomponents(LWC)toincrease
consistency
I created and explained how to create the custom base LWC in the Salesforce environment. I used existing designed base components from Storybook which is an open-source website and I used Skyskanner’s library which is a flight booking website from Storybook. As this thesis is more focused on implementing/coding custom base LWC than on designing them I used Skyskanner’s button and card design. I created two custom base LWC:SKyscannerButton and SkyscannerCard in the Salesforce environment.
I explained how I created the custom base LWC and show the results in the thesis and they look exactly the same as the Skyscanner’s references, so my first goal was achieved.
I created a few different versions of the Skyscanner’s components, they look and work in a similar way to each other which means they have consistency. If used then all the buttons and cards used in a project's website will look and work the same. This means that my second problem has been solved and my second goal has been achieved.
The benefit of having good consistency is that the user of a website will feel very comfortable and learn how to use it quickly. This means there is less need to make changes or updates to the website in the future, which will save a lot of time and resources. Even if there are changes that need to be made to these custom base LWC, then they don’t have to change every base component on each website, they can just modify these custom base LWC which will update the whole website.
1. Implementingthecustombaselightningwebcomponents(LWC)successfully 2. Byimplementingthecustombaselightningwebcomponents(LWC)toincrease
consistency
I created and explained how to create the custom base LWC in the Salesforce environment. I used existing designed base components from Storybook which is an open-source website and I used Skyskanner’s library which is a flight booking website from Storybook. As this thesis is more focused on implementing/coding custom base LWC than on designing them I used Skyskanner’s button and card design. I created two custom base LWC:SKyscannerButton and SkyscannerCard in the Salesforce environment.
I explained how I created the custom base LWC and show the results in the thesis and they look exactly the same as the Skyscanner’s references, so my first goal was achieved.
I created a few different versions of the Skyscanner’s components, they look and work in a similar way to each other which means they have consistency. If used then all the buttons and cards used in a project's website will look and work the same. This means that my second problem has been solved and my second goal has been achieved.
The benefit of having good consistency is that the user of a website will feel very comfortable and learn how to use it quickly. This means there is less need to make changes or updates to the website in the future, which will save a lot of time and resources. Even if there are changes that need to be made to these custom base LWC, then they don’t have to change every base component on each website, they can just modify these custom base LWC which will update the whole website.