What is Session Overrides

Session Overrides are a convenient way for developers to quickly change values in the session that the APEX engine is typically responsible for, like File Paths, Additional Files and Globalization Attributes.

Here is the official documentation.

Okay, but how do Session Overrides speed up the development process?

They speed it up because it allows using a local JS or CSS files on your machine which are referenced in the app. This way you don't have to go to the Shared Components and edit your Workspace or Application files before you can see the results in the app. Very convenient feature - once you start to use it, you'll never look back. Small detail - it's available since APEX version 22.1

Visual Studio Code setup

1. Install Visual Studio Code (VS Code) if you don't already have it installed - visit the official website

2. Install "Live Server" extension

   • Open VS Code and navigate to the Extensions menu item on the left.
   • Search for the Live Server extension.
   • Click on it, as shown in the screenshot. The extension page will open.
   • Click Install so you add the extension to your VS Code instance.

   

   

3. Create a new folder on your machine (Localfiles for example) and two files we will be using in our APEX application - apex_session_override.js and apex_session_override.css

   

4. Add New Folder in VS Code

   • Going back to VS Code, open the Explorer (first item in the menu)
   • Click on Open Folder and select the Localfiles folder you have already created
   • Confirm that you trust the files in this folder (obviously)
   • After confirming, select the Go Live option in the bottom right of VS Code editor
   • It will start a localhost server on your machine with both files listed and accessible at http://127.0.0.1:5500/

   

   

APEX setup

1. Enable Session Overrides in your APEX Application

   • Make sure you are logged into the APEX Builder, so that APEX Dev Toolbar is available
   • Select Session / Session Overrides
   • Click the toggle to enable them and add the URLs for the CSS and JS files as shown
   • Click Save to confirm your changes
   • Both files should now be available on your page. To validate that, you can use the Browser Dev Tools, as shown

   

   

Test your setup

1. To test the Session Overrides, create a Page Item (Button), using the following settings:
2. Update the CSS file we already created with some style for the page button
3. Save the document and refresh the page
4. Enjoy the changes

:root {
    --pm-button-background-color: #cb3d06;
    --pm-button-state-background-color: #a43205;
}

.pm_custom_button {
    --a-button-background-color: var(--pm-button-background-color);
}

.pm_custom_button:hover {
    --a-button-state-background-color: var(--pm-button-state-background-color);
}

Follow me

Liked that post? Follow me on Twitter and LinkedIn!

🔷 @plamen_9 on Twitter
🔷 Plamen Mushkov on LinkedIn