Does implementing SCIS extensions require specific permissions or roles in NetSuite?

The article does not provide details on required permissions or roles for implementing SCIS extensions. Typically, development in NetSuite involves having the SuiteApp Developer permissions.

Are information dialogs customizable in SCIS extensions, similar to confirmation dialogs?

The article specifically outlines customization for confirmation dialogs such as title, message, and button labels, but does not provide details on customization options for information dialogs.

Do modal dialogs in SCIS work in Standard NetSuite environments?

Modal dialogs as described are specific to SCIS extensions and are intended for use within the SuiteCommerce InStore environment to interact with user actions such as cart modifications.

How do modal dialogs integrate with existing SuiteCommerce InStore workflows?

Modal dialogs in SCIS extensions integrate with workflows by using event listeners, such as listening for the 'beforeAddLine' event, to trigger dialogs based on user interactions or certain conditions.

Modal Dialog Types for SCIS Extensio...

The SCIS extensibility API allows developers to create extensions for SuiteCommerce InStore (SCIS), enabling the display of modal dialogs in response to user actions in the cart, such as adding items or applying discounts.

Creating an SCIS Extension

Creating an SCIS extension follows a similar process as for SuiteCommerce or SuiteCommerce Advanced:

Download and install extension developer tools.
Create a baseline extension: Select SuiteCommerce InStore during the setup. For more information, refer to the section on creating a baseline extension.
Add your extension code.
Test and deploy the extension.

During the creation of a baseline extension, the developer tools generate the necessary directory structure, including an initial JavaScript module. This module serves as the foundational code for your extension and is located at [workspace folder]/[extension name]/Modules/JavaScript.

Example of Initial Module Code

The following block demonstrates the basic structure of an initial module, which initializes an extension in SCIS:

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                
9            }
10        };
11    }
12);

Modal Dialog Types

Modal dialogs are crucial for prompting users with important information or for confirmation purposes. There are two primary types of modal dialogs:

Information Dialog: Displays a message with one button. The user must click the button to proceed.
Confirmation Dialog: Presents a choice with two buttons, allowing users to confirm or cancel an action.

Defining Modal Dialog Options

To create a modal dialog, you obtain an instance of the SCIS layout component and call the showConfirmationPopup() method. This method accepts an object with properties for customizing the dialog's content, including its title, message, and button labels. Below is an example setup for a confirmation dialog:

javascript

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

To show a modal dialog before adding an item to the cart, listen for the beforeAddLine event. The following code illustrates this implementation:

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(confirmationPopupOptionsAgeRequirements).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 checks if an item’s internal ID matches a specific value and displays a confirmation dialog. The promise returned by showConfirmationPopup() allows you to handle the user's choice appropriately.

Full Example Code

Here’s a complete example of how you might set up a modal dialog in your SCIS extension:

javascript

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

This script will show a confirmation dialog when attempting to add an item with the internal ID 10101 to the cart.

Key Takeaways

SCIS extensions allow customization for modal dialogs in response to user actions.
Two types of modal dialogs are available: information and confirmation dialogs.
The confirmation dialog can be defined with various properties, including button text and messages.
Modal dialogs must be invoked through event listeners attached to cart actions.
The implementation involves handling promises to manage user responses appropriately.

Modal Dialog Types for SCIS Extensions in NetSuite

Creating an SCIS Extension

Example of Initial Module Code

Modal Dialog Types

Defining Modal Dialog Options

Triggering the Modal Dialog on Events

Full Example Code

Key Takeaways

Frequently Asked Questions (4)

More in Commerce