Define Modal Dialog Options for SCIS Extensions

Modal dialogs are essential components for enhancing user interactions in SCIS (SuiteCommerce InStore). They allow developers to present critical information or confirm actions during key events, such as adding items to a shopping cart or applying discounts.

How to Create a Modal Dialog

To create a modal dialog, you need to leverage the SCIS extensibility API which provides robust options. Here’s how to define a modal dialog step-by-step:

1. Setup Development Environment: First, download and install the extension developer tools necessary for creating SCIS extensions.
2. Create a Baseline Extension: Using the tools, create a baseline extension by selecting SuiteCommerce InStore as the supported extension.
3. Develop Your Extension: Add your extension code to customize functionality.
4. Testing and Deployment: Test your new extension locally before deploying it to your live environment.

Initial Module Configuration

When generating a baseline extension, the developer tools will automatically create the directory structure required, as well as a JavaScript file for the initial module. This module serves as the foundation for your custom functionality.

Here’s a snippet of the initial module configuration you would set up:

1define(
2    'Company.SCISExtensionName.MainModule',
3    [],
4    function() {
5        'use strict';
6        return {
7            mountToApp: function mountToApp(container) {
8                // Code will be added here
9            }
10        };
11    }
12);

Types of Modal Dialogs

There are two principal types of modal dialogs you may use in SCIS:

• Information Dialog: Displays critical messages with a single button to allow users to proceed.
• Confirmation Dialog: Invites users to confirm or cancel an action with two buttons, providing them a choice.

Defining Modal Dialog Options

To implement a modal dialog, obtain an instance of the SCIS layout component and call the showConfirmationPopup() method, passing an options object configured with properties like title, message content, and button labels. Below is an example demonstrating a confirmation dialog setup:

1var layout = SC.Application('SCIS').getComponent('SCISLayout');
2 
3var confirmationPopupOptions = {
4    title: 'Age Verification',
5    toastType: 'warning',
6    toastContent: 'Verify customer is +18 years old.',
7    messageContent: 'Sale of this item prohibited to minors. Tap Age Confirmed only if the customer is +18 years old.',
8    confirmationButtonText: 'Age Confirmed',
9    cancelationButtonText: 'Remove Item'
10};

Triggering the Modal Dialog

To display the modal dialog when a specific condition is met (like an item being added to the cart), listen for the beforeAddLine event. Here’s how to implement that:

1var cart = SC.Application('SCIS').getComponent('Cart');
2 
3cart.on('beforeAddLine', function(data) {
4    if (data.line.internalid == '10101') {
5        layout.showConfirmationPopup(confirmationPopupOptions).then(function(result){
6            if (result.action === 'cancel') {
7                throw Error('Item not added to cart.');
8            }
9        });
10    }
11});

This code fragment ensures that when an item with the internal ID 10101 is about to be added to the cart, a confirmation dialog appears, prompting users to verify before completing the action.

Full Example Code

Combining all the snippets gives you a complete view of a modal dialog implementation in your SCIS extension:

1define(
2    'Company.SCISExtension.MainModule',
3    [],
4    function () {
5        'use strict';
6        return {
7            mountToApp: function mountToApp(container) {
8                var layout = SC.Application('SCIS').getComponent('SCISLayout');
9                var cart = SC.Application('SCIS').getComponent('Cart');
10 
11                var confirmationPopupOptions = {
12                    title: 'Age Verification',
13                    toastType: 'warning',
14                    toastContent: 'Verify customer is +18 years old.',
15                    messageContent: 'Sale of this item prohibited to minors. Tap Age Confirmed only if the customer is +18 years old.',
16                    confirmationButtonText: 'Age Confirmed', 
17                    cancelationButtonText: 'Remove Item'
18                };
19 
20                cart.on('beforeAddLine', function(data) {
21                    if (data.line.internalid == '10101') {
22                        layout.showConfirmationPopup(confirmationPopupOptions).then(function(result){
23                            if (result === 'cancel') {
24                                throw Error('Item not added to cart.');
25                            }
26                        });
27                    }
28                });
29            }
30        }; 
31    }
32);

Key Takeaways

• Modal dialogs enhance user interactions by confirming actions and conveying essential messages.
• SCIS allows customization of dialogs, although style cannot be altered.
• Understanding the event-driven approach is crucial for triggering dialogs effectively in user workflows.