How do I define a modal dialog in SCIS using the SCIS extensibility API?

To define a modal dialog in SCIS, use the SCIS extensibility API and call the 'showConfirmationPopup()' method with an options object that includes properties like title, message content, and button labels.

What event should I listen for to trigger a modal dialog before adding an item to the cart in SCIS?

To trigger a modal dialog before adding an item to the cart, listen for the 'beforeAddLine' event using the 'Cart' component in SCIS.

Can the style of modal dialogs in SCIS be customized?

No, the style of modal dialogs in SCIS cannot be altered; customization is limited to configuring the dialog's content and functionality.

Is it necessary to install any specific tools to create SCIS extensions?

Yes, you must download and install the SCIS extension developer tools to create and develop SCIS extensions effectively.

Define Modal Dialog Options for...

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:

Setup Development Environment: First, download and install the extension developer tools necessary for creating SCIS extensions.
Create a Baseline Extension: Using the tools, create a baseline extension by selecting SuiteCommerce InStore as the supported extension.
Develop Your Extension: Add your extension code to customize functionality.
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:

javascript

1"text-purple-400">define(
2    'Company.SCISExtensionName.MainModule',
3    [],
4    "text-purple-400">function() {
5        'use strict';
6        "text-purple-400">return {
7            mountToApp: "text-purple-400">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:

javascript

1"text-purple-400">var layout = SC.Application('SCIS').getComponent('SCISLayout');
2 
3"text-purple-400">var 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:

javascript

1"text-purple-400">var cart = SC.Application('SCIS').getComponent('Cart');
2 
3cart.on('beforeAddLine', "text-purple-400">function(data) {
4    "text-purple-400">if (data.line.internalid == '10101') {
5        layout.showConfirmationPopup(confirmationPopupOptions).then("text-purple-400">function(result){
6            "text-purple-400">if (result.action === 'cancel') {
7                "text-purple-400">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:

javascript

1"text-purple-400">define(
2    'Company.SCISExtension.MainModule',
3    [],
4    "text-purple-400">function () {
5        'use strict';
6        "text-purple-400">return {
7            mountToApp: "text-purple-400">function mountToApp(container) {
8                "text-purple-400">var layout = SC.Application('SCIS').getComponent('SCISLayout');
9                "text-purple-400">var cart = SC.Application('SCIS').getComponent('Cart');
10 
11                "text-purple-400">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', "text-purple-400">function(data) {
21                    "text-purple-400">if (data.line.internalid == '10101') {
22                        layout.showConfirmationPopup(confirmationPopupOptions).then("text-purple-400">function(result){
23                            "text-purple-400">if (result === 'cancel') {
24                                "text-purple-400">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.

Source: This article is based on Oracle's official NetSuite documentation.

Define Modal Dialog Options for SCIS Extensions

How to Create a Modal Dialog

Initial Module Configuration

Types of Modal Dialogs

Defining Modal Dialog Options

Triggering the Modal Dialog

Full Example Code

Key Takeaways

Frequently Asked Questions (4)

More in Commerce