Creating a Modal Popup Lightning Component

A quick tutorial on how to create a modal popup with Lightning Component.

What is modal popup?

Modal popup acts like a container for your content that displays on top of the content you are viewing. Imagine content stacked on top of it.

In short, a modal popup is a very handy way of showing content in front of your app.

How to build one in lightning?

  • First create lightning component and add a boolean attribute then default it’s value to false
  • On your controller, toggle the boolean value as you see fit based on events.
    • cancelBtn onclick event sets the displayModal value to true, thus displaying the modal.
    • yesBtn onclick event tied to the button navigates to another URL and sets the displayModal value back to false, thus hiding the modal popup

That’s it, you should have a working modal popup ready to go.

Final code is available here in GitHub

https://github.com/olopsman/lc-modal-popup

How to Validate forms built with Lightning Components

I recently had a requirement to create a basic lightning component to capture form inputs. I previously had a not so good experience with building custom validation with Lightning components back in Summer17 when lightning was pretty new. I was using force:inputField and also used lightning:inputField.

Past few years it has become more efficient and easier with just the lightning:input field and default HTML5 APIs.

I have a simple bank form that captures and validates the form as such and when submitted validates the required fields.

Form

For the Bank Account Name input field specify the required attribute as true and check the validity of the field.

I use reportValidity to display the error message in the input field

And for the Bank Account Number input field aside from setting the field as true, I also specified a regular expression pattern. And then used the setCustomValidity function to display a custom error message.

And that folks, is how easy to validate the input form. Hit the comments below if you need help building your validation.

How To Use Regular Expressions (Regex)

“Some people, when confronted with a problem, think ‘I know, I’ll use regular expressions.’ Now they have two problems.” – Jamie Zawinski

Every now and then I have some requirements where it entails parsing some data where I need to use some form of Regular Expression(regex), it is a syntax to use to search for patterns in a string or sets of strings. At first, the syntax looks intimidating and most people would shy away and resort to writing some functions to solve the issue.

Learning regex is a must-have skill to have as it can be applied to a wide range of tasks that needs some sort of search or parsing and is widely available in most programming languages, works on shells, text editors and IDEs, etc..). I use it most of the time when writing front end Javascript validation and backend logic in Apex NodeJS, Java/Groovy , Swift and Python

I created this cheat sheet that covers the basics and some handy tips.

Flags

The search pattern is normally delimited by two slash characters /abc/. At the end we can specify a combination of the following flags.

  • g (global) – Don’t return after the first match
  • m (multi-line) – ^ and $ match start/end of line
  • i (insensitive) case insensitive match
  • x (extended) ignore whitespace
  • X (eXtra) disallow meaningless escape
  • s (single line) dot matches new line
  • u (unicode) match with full unicode
  • U (Ungreedy) make quantifiers lazy
  • A (Anchored) anchor to start of pattern
  • J (Jchanged) allow duplicate subpattern names
  • D (Dollar end only) $ matches only end pattern


Anchors

Quantifiers

Or and Brackets

When inside bracket expressions all special character rules do not apply. E.g. \ to escape a character does not apply

Character Classes

In order to be taken literally, you must escape the characters ^.[$()|*+?{\with a backslash \ as they have special meaning.

Groupings

Greedy and Lazy Quantifiers

The quantifiers ( * + {}) are greedy operators, so they expand the match as far as they can through the provided text.

Boundaries

Back References – \1

Look-ahead and Look-behind

Top Regular Expressions

Summary

As we’ve learned regex is so powerful and its’s application is wide. Listed below some of few things you can do with regex within your project.

  • input and data validation –
    • validate user input in forms
    • validate data before applying logic or saving to database
    • validating JSON schema
  • replacing values – replace specific data in a string
  • text parsing – eg. retrieve only bits of data from a string or URL or delimiters
  • string replacement – eg on some IDE you can find and replace a string, use regex to search for particular patterns
  • web scraping – look for specific patterns for data to scrape

Sample Codes

Apex class that implements removal of white space not found in quotes

Python script that crawls pages that matches the pattern.

And finally, as a takeaway just learn the syntax and hack away.

How to Create a Generic Class for Mocking REST Callouts for Unit Test

I’m starting a new habit of posting regularly on my blog every week. I’ll be kicking it off with tips for creating a generic class or a mocking factory for mocking calls to an external third-party service.

Why do we need to do a mock?

When running unit tests the platform does not allow to do a callout to external dependencies. To test our code base we would need to mock the response as if calling the third party dependency.

By mocking we focus on the code being tested, isolating it from the state and behavior of the external system. The dependencies are simulated and the output state can be controlled.

To start we create a class that implements the HttpCalloutMock. This class enables sending a fake response when doing HTTP callouts. When our code makes a callout, the response will come from our HttpCalloutMock class.

When creating the class we define the constructor and parameters. We can make it generic and serve as a mock factory. Instead of writing several mock classes for every type of response, we only write it once which promotes code reusability best practices. And during unit testing, we define the mock response on the fly.

Here is our sample class which implements the HttpCalloutMock.

And if we have a class that does an HTTP Callout and we want to write a unit test for it. This is how it going to look like.

This is how we would create a unit test.

Key Takeaways

  • Use named credentials when possible when doing HTTP Callouts. Will talk about this more in the future.
  • When writing the unit test, the key is to call Test.setMock() which makes sure any callout from your code will return the Mock object.
  • Define the mock response on the fly to test different response.

Hope you find this useful. Stay tuned for more coding content and tips. If interested in the source code it is available in GitHub.

Custom Lightning Component Related List With Real Time REST Data

For this tutorial I’ll show a technique on how to integrate external data and display the data real time in Salesforce. This would not use an external object but a simple custom related list component that uses lightning:datatable base component and a controller than retrieves data via callout to an external REST resource and display them in Salesforce.

This is how it would look like.

 

For this, I’m calling this a static REST resource that returns the following JSON response.

Next, we need to display this data in a related list in Salesforce. We create a simple lightning component that we can add using Lightning App builder.

Start with the following lightning component markup.

And controller that calls a helper.

The helper creates a server-side call that creates the REST callout. Then on the successful response, I’m setting the value for the mycolumns attribute by assigning a Javascript object assigning the properties of the column for the datatable. Then I simply assign the mydata attribute assigning and using JSON.parse to turn the response to a Javascript object. With that simple code, I have a related list.

Note: you do not need the var actions as this is for another method I’m working on.

Then for my controller, I have this simple call to my server

Then I simply drop the component on Lightning App Builder to the related list section for a quick UI match. That should be it.