How to display a modal window using lightning web components

We will go through building a reusable lightning web component that you can use to show modal windows in other LWC components.

Use cases

• Display modal window or popup window in user interface

Explanation

We can use lightning design system sample modal code in the link to show the modal window. But to implement opening and closing behavior of the modal, we need to use javascript variables in lwc. We will create a reusable lwc component with name "utilModal". This will have code needed to show and hide modal window. Then we will create a sample parent component with name "modalParentExample" that we can use embed modal component. We fire custom events from utilModal component and parent "modalParentExample" catches these events. Parent component can use these action handlers to execute actions when buttons in modal window are clicked.

How to use

• Create an LWC component with name utilModal
• Copy content from above code to utilModal component. utilModal.html is the HTML file and utilModal.js is the Javascript file
• "modalParentExample" has sample code to open modal window

How to use platform cache - with example

Platform cache allows you to cache data in Salesforce server. Accessing platform cache is faster than getting data by querying from objects or custom settings.

Use cases

• Storing API session token till it expires
• Caching frequently called API response data
• Caching results from time consuming operations like complex queries and calculations

Types of platform cache

1. Session Cache

   Stores data in association with user’s session. Maximum life is 8 hours. Only the user who put data to this cache can retrieve it back.

2. Org Cache

   Data is stored at the org level. Any user can access data in cache.

How to setup

• Go to Setup -> Platform Cache
• Click on “New Platform Cache Partition” button
• Enter necessary details and click “Save”. You can select “Default” checkbox to make the partition your default partition to avoid specifying partition name which caching data

It is recommended to create a separate class to manage all operations with cache. You can see an example of using a service class to manage org cache below. CacheService class is used to just manage cached data and ExternalSystemAPI class leverages that class to cache access token.