Using Web Components (Part 2)
Posted January 9th, 2023
As we’ve seen in our part 1 of this series about Web Components (see post), they are not only a highly recommended development tool but also an immensely powerful and flexible one. These reasons, coupled with its element of reusability, made for a simple and logical decision to include them in our platform.
Part 1 of this series exists as an introduction to the subject, exposing all its potential and showcasing examples. In this part 2, we’ll focus on some of our most common use cases, as well as a detailed explanation video with all the necessary steps to implement one example on your web application using our newly published “Masked Input” web component.
Web Components are primarily used for visual (layout) extensibility purposes. If the need for visually distinct elements occurs, building a web component is the way to obtain the desired results. Furthermore, by building the new element in the form of a web component, you’re guaranteeing its reusability for future projects. Build once, and use it as many times as needed.
Web Components cover a huge range of solutions, and allow you to make use of virtually any kind of functionality to improve your web application. There are, however, a few examples that are more common in web applications, and in this post we’ll focus on one of the most popular applications:
Regular Expressions
“A regular expression (regex or regexp for short) is a special text string for describing a search pattern.” – regular-expressions.info
Regular expressions are most commonly used to validate data. A rule, or set of rules, is defined, and then the data is validated against those rules. From country Zip Codes to emails, IBANs or street addresses, using regular expressions to validate user data guarantees that the information will be, at least, following the correct structure.
The following regular expressions are some of the more common use cases:
(Portugal) Zip Code (source):
^\d{4}(?:[-\s]\d{3})?$ (format: xxxx-xxx)Email (source):
/^(([^<>()\[\]\\.,;:\s@”]+(\.[^<>()\[\]\\.,;:\s@”]+)*)|(“.+”))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/IBAN (source):
\b[A-Z]{2}[0-9]{2}(?:[ ]?[0-9]{4}){4}(?!(?:[ ]?[0-9]){3})(?:[ ]?[0-9]{1,2})?\b
In order to easily apply regular expressions in a project, we’ve developed the “Masked Input” web component, available for free, on our Community Web Components Github repository.
Feel free to contribute to our Community Web Component GitHub repository with your own Web Components and make sure to keep an eye out for future updates, we’ll keep adding more and more.
We hope you’ve enjoyed this part 2 of “Using Web Components” on our OMNIA Platform, we’ll surely revisit the topic soon, and you can expect a part 3 for this series.
