Module 12: Suitelets (Custom Pages)

🎯 Learning Objectives

• Understand what Suitelets are and when to use them
• Handle GET and POST requests
• Build custom forms using N/ui/serverWidget
• Process form submissions

1. What Are Suitelets?

Suitelets are custom pages you build from scratch. Unlike User Event scripts that modify existing records, Suitelets create entirely new user interfaces.

2. Request/Response Cycle

/**
 * @NApiVersion 2.1
 * @NScriptType Suitelet
 */
define(['N/ui/serverWidget'], function(serverWidget) {
    
    function onRequest(context) {
        // context.request.method = 'GET' or 'POST'
        // context.request.parameters = URL parameters
        // context.response = what to send back
        
        if (context.request.method === 'GET') {
            // Display a form
            var form = serverWidget.createForm({ title: 'My Custom Page' });
            context.response.writePage(form);
        } else {
            // Process form submission
            var name = context.request.parameters.custpage_name;
            context.response.write('You submitted: ' + name);
        }
    }
    
    return { onRequest: onRequest };
});

3. Building Forms

function onRequest(context) {
    if (context.request.method === 'GET') {
        var form = serverWidget.createForm({
            title: 'Customer Feedback Form'
        });
        
        // Add fields
        form.addField({
            id: 'custpage_name',
            type: serverWidget.FieldType.TEXT,
            label: 'Your Name'
        });
        
        form.addField({
            id: 'custpage_email',
            type: serverWidget.FieldType.EMAIL,
            label: 'Email Address'
        });
        
        form.addField({
            id: 'custpage_comments',
            type: serverWidget.FieldType.TEXTAREA,
            label: 'Comments'
        });
        
        // Add submit button
        form.addSubmitButton({ label: 'Submit Feedback' });
        
        context.response.writePage(form);
    }
}

Field Types

Type	Use For
TEXT	Short text input
TEXTAREA	Multi-line text
EMAIL	Email addresses
DATE	Date picker
SELECT	Dropdown list
CHECKBOX	Yes/No toggle
INTEGER	Whole numbers
CURRENCY	Money amounts

4. Processing Submissions

function onRequest(context) {
    if (context.request.method === 'POST') {
        // Get submitted values
        var name = context.request.parameters.custpage_name;
        var email = context.request.parameters.custpage_email;
        var comments = context.request.parameters.custpage_comments;
        
        // Create a record
        var feedback = record.create({ type: 'customrecord_feedback' });
        feedback.setValue({ fieldId: 'name', value: name });
        feedback.setValue({ fieldId: 'custrecord_email', value: email });
        feedback.setValue({ fieldId: 'custrecord_comments', value: comments });
        var feedbackId = feedback.save();
        
        // Show confirmation
        var form = serverWidget.createForm({ title: 'Thank You!' });
        form.addField({
            id: 'custpage_message',
            type: serverWidget.FieldType.INLINEHTML,
            label: ' '
        }).defaultValue = '
Feedback submitted successfully!
ID: ' + feedbackId + '
';
        
        context.response.writePage(form);
    }
}

🏋️ Practice Exercises