How to create sublist and summary box in suitelet?

402 Views Asked by At

I want to create summary box like for example sales order summary box. In that box I have to show these fields. and below sublist for individual field values. same like sales order record. How we can create this design? Please Help!

field1

field2

           '<table align="left" bgcolor="#e0e6ef" style="width:20%;">'            
           '<tr>' 
           '<td>'                   
           '<p style="text-align: left;">'+'field1'+'</p>'
           '</td>'   
           '<td>'                   
           '<p style="text-align: right;">'+value2+'</p>'
           '</td>'   
           '</tr>' 
           '<tr>' 
           '<td>'                   
           '<p style="text-align: left;">'+'field2'+'</p>'
           '</td>'   
           '<td>'                   
           '<p style="text-align: right;">'+value2+'</p>'
           '</td>'   
           '</tr>' 
        
1

There are 1 best solutions below

2
SuiteStar On BEST ANSWER

You can do like this to add a list of fields and sublist in suitelet:-

        var form = serverWidget.createForm({
            title: 'SUMMARY'
        });
        var field1 = form.addField({
            id : 'custpage_text',
            type : serverWidget.FieldType.INLINEHTML,
            label : ' '
        });
        
        //rename fields and values according to you.
        var value1=1,value2=2, value3= 3, value4=4,value5=5, value6=6;
        var myListField = '<!DOCTYPE html>';
        myListField +=    '<html>' 
        myListField +=    '<head>' 
        myListField +=      '</head>' 
        myListField +=    '<body>'                       
        myListField +=    '<p style="text-align: left;"><h4>field1 '+value1+'</h4></p></br>'
        myListField +=    '<p style="text-align: left;"><h4>field2 '+value2+'</h4></p></br>'
        myListField +=    '<p style="text-align: left;"><h4>field3 '+value3+'</h4></p></br>'
        myListField +=    '<p style="text-align: left;"><h4>field4 '+value4+'</h4></p></br>'
        myListField +=    '<p style="text-align: left;"><h4>field5 '+value5+'</h4></p></br>'
        myListField +=    '<p style="text-align: left;"><h4>field6 '+value6+'</h4></p></br>'
        myListField +=    '</body>' 
        myListField +=    '</body>' 
        myListField +=    '</html>' 

        field1.defaultValue=myListField;
       
       // Creating sublist
        var sublist = form.addSublist({
            id: 'custpage_sublist',
            type: serverWidget.SublistType.STATICLIST,
            label: 'Manufacturing Work Order',
            tab: 'subtab2id'
        });

        //sublist.addMarkAllButtons();

        sublist.addField({
            id: 'custpage_sublist1',
            type: serverWidget.FieldType.CHECKBOX,
            label: 'PRINT'
        });

        sublist.addField({
            id: 'custpage_sublist8',
            type: serverWidget.FieldType.INTEGER,
            label: 'INTERNAL ID'
        });

        sublist.addField({
            id: 'custpage_sublist2',
            type: serverWidget.FieldType.TEXT,
            label: 'WORK ORDER',
            source: 'workorder'
        });

        sublist.addField({
            id: 'custpage_sublist3',
            type: serverWidget.FieldType.TEXT,
            label: 'Assembly Item'
            //source:'manufacturingrouting'
        });

        sublist.addField({
            id: 'custpage_sublist4',
            type: serverWidget.FieldType.DATE,
            label: 'START DATE'
        });
       
     scriptContext.response.writePage(form);

Design the size of page according to you.

Thanks,