How to display fields one below one in suitelet

I want to display fields one below one in a suitelet. How it can be achieved? Please help:

 

Expected output:

field1

field2

field3

field4

field5

field6

field7

Total

Beginner Asked on February 23, 2023 in SuiteScript.
Add Comment
5 Answer(s)

Hi,

Depending on your exact situation, you will need to use Field.updateBreakType() [https://suiteanswers.custhelp.com/app/answers/detail/a_id/48721] and possibly Field.updateLayoutType() [https://suiteanswers.custhelp.com/app/answers/detail/a_id/43655].

Let me know if you need any further help.

Thanks,

Chris

Advanced Answered on February 23, 2023.
Add Comment

Thanks for response!

 

I tried here but not getting expected output

/**
* @NApiVersion 2.x
*@NScriptType Suitelet
* … more options …
*/
define([‘N/ui/serverWidget’,’N/record’,’N/search’], function(serverWidget,record,search) {
function onRequest(context) {
if (context.request.method === ‘GET’) {
try{
var form = serverWidget.createForm({ title: ‘Funds Form’ });

form.addSubmitButton({ label: ‘Transfer Funds’ });

var noOfEmployeesField=form.addField({
id: ‘custpage_no_of_employees’,
type: serverWidget.FieldType.INTEGER,
label: ‘No of employees’});

var netPayField=form.addField({
id: ‘custpage_netpay’,
type: serverWidget.FieldType.INTEGER,
label: ‘Net Pay’});

var ccpEmployeeField=form.addField({
id: ‘custpage_ccpemploee’,
type: serverWidget.FieldType.INTEGER,
label: ‘CCP Employee’});

var ccpEmployerField=form.addField({
id: ‘custpage_ccpemploer’,
type: serverWidget.FieldType.INTEGER,
label: ‘CCP Employer’});

var eiEmployeeField=form.addField({
id: ‘custpage_eiemploee’,
type: serverWidget.FieldType.INTEGER,
label: ‘EI Employee’});

var eiEmployerField=form.addField({
id: ‘custpage_eiemploer’,
type: serverWidget.FieldType.INTEGER,
label: ‘EI Employer’});

var iTaxDeductionField=form.addField({
id: ‘custpage_itaxdeduction’,
type: serverWidget.FieldType.INTEGER,
label: ‘No of employees’});

var totalField=form.addField({
id: ‘custpage_totalfield’,
type: serverWidget.FieldType.INTEGER,
label: ‘Total’});

noOfEmployeesField.updateLayoutType({
layoutType : serverWidget.FieldLayoutType.OUTSIDEABOVE
});

netPayField.updateLayoutType({
layoutType : serverWidget.FieldLayoutType.STARTROW
});

ccpEmployeeField.updateLayoutType({
layoutType : serverWidget.FieldLayoutType.MIDROW
});

ccpEmployerField.updateLayoutType({
layoutType : serverWidget.FieldLayoutType.ENDROW
});

eiEmployeeField.updateLayoutType({
layoutType : serverWidget.FieldLayoutType.OUTSIDE
});

eiEmployerField.updateLayoutType({
layoutType : serverWidget.FieldLayoutType.MIDROW
});

iTaxDeductionField.updateLayoutType({
layoutType : serverWidget.FieldLayoutType.MIDROW
});

totalField.updateLayoutType({
layoutType : serverWidget.FieldLayoutType.OUTSIDEBELOW
});

//Break Type————————————————————————-

noOfEmployeesField.updateBreakType({
breakType : serverWidget.FieldBreakType.STARTROW
});

netPayField.updateBreakType({
breakType : serverWidget.FieldBreakType.STARTROW
});

ccpEmployeeField.updateBreakType({
breakType : serverWidget.FieldBreakType.STARTROW
});

ccpEmployerField.updateBreakType({
breakType : serverWidget.FieldBreakType.STARTROW
});

eiEmployeeField.updateBreakType({
breakType : serverWidget.FieldBreakType.STARTROW
});

eiEmployerField.updateBreakType({
breakType : serverWidget.FieldBreakType.STARTROW
});

iTaxDeductionField.updateBreakType({
breakType : serverWidget.FieldBreakType.STARTROW
});

totalField.updateBreakType({
breakType : serverWidget.FieldBreakType.STARTROW
});

context.response.writePage(form);

} catch (error) {
log.debug(‘Error’, error);
}

} else if (context.request.method === ‘POST’) {
// log.debug(“Suitelet is posting.”)
}

}
return{
onRequest:onRequest
}
})

Beginner Answered on February 23, 2023.
Add Comment

Hi,

Try this:

field1.updateLayoutType({
    layoutType: serverWidget.FieldLayoutType.OUTSIDE
});
field1.updateBreakType({
    breakType : serverWidget.FieldBreakType.STARTROW
});

Thanks,

Chris

Advanced Answered on February 23, 2023.
Add Comment

Can we add more space between field1 and field2?

Beginner Answered on December 10, 2023.
Add Comment

What does it look like currently? Can we see a screenshot?

Advanced Answered on December 11, 2023.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.
  • This site made possible by our sponsors:   Tipalti   Celigo   Become a Sponsor   Become a Sponsor