Question-UI Component Layouts

Your formLayout should go inside of the with(), and the sectionLayouts can then go inside of the contents section of the formLayout.  So something like

=load(
  local!dataSubset : a!dataSubset(
    startIndex: 1,
    batchSize: 1,
    data: {},
    totalCount: 0
  ),
  local!expDataSubset: a!dataSubset(
    startIndex: 1,
    batchSize: 1,
    data:{},
    totalCount: 0
  ),
  local!expdPagingInfo: a!pagingInfo(
    startIndex: 1,
    batchSize: 20
  ),
  local!pagingInfo:a!pagingInfo(
    startIndex: 1,
    batchSize: -1
  ), 
    local!rowData,
    local!selectedRows,
    local!singleLineFlag,
    local!selectedTierValue:"Tier 1",
    local!selectedReasonCode,
    local!selectedFeeReasonCode,
    local!expediteFee,
    local!carbonCopy,
  local!selectedYesNo:null,
  local!partialQuantity,
  local!initiatorComments,
  local!expediteData,
  local!apiErrorMessage,
  local!apiResult,
  local!orderNumber,
  local!gridDataSubset:null,
  local!gridSelection: a!gridSelection(
    pagingInfo: a!pagingInfo(
      startIndex: 1,
      batchSize: 20,
      sort:a!sortInfo(
        field:"line_id"
      )
    ),
    selected: {}
  ),
    with(
     local!datasubset: if(isnull(local!orderNumber),{},rule!EXP_GetExpdOrderLinesByOrdNum(ri!orders.order_number,local!gridSelection.pagingInfo)),
     /*local!gridDataSubset:if(isnull(local!orderNumber),{},todatasubset(local!dataSubset.data,local!gridSelection.pagingInfo)),*/
       /*a!textField(*/
      /*label:"Check Value",*/
      /*value:local!gridDataSubset,*/
      /*readOnly:true()*/
    /*)*/
  a!formLayout(
  label: "Initiate Expedite",
  contents: {
    a!textField(
      label: "Order Number",
      labelPosition: "ADJACENT",
      /*instructions: "Please enter an Order Number to proceed!",*/
      value: ri!orders.order_number,
      saveInto: ri!orders.order_number,
      refreshAfter: "UNFOCUS",
      required: true,
      requiredmessage: "Value for Order Number is required"
      /*validations: a!validationMessage(*/
        /*message:"Please enter an Order Number to Proceed",*/
        /*validateAfter: "REFRESH",*/
        /*showWhen: isnull(ri!orders.order_number)*/
      /*)*/
    ),
    /*a!textField(*/
      /*label:"Check Value",*/
      /*value:local!dataSubset,*/
      /*readOnly:true()*/
    /*),*/
    a!buttonLayout(
      primaryButtons: {
        a!buttonWidget(
          label: "Search",
          saveInto: {
            /*a!save(local!dataSubset,rule!EXP_GetExpdOrderLinesByOrdNum(ri!orders.order_number,local!pagingInfo)),*/
            a!save(local!expDataSubset,rule!EXP_GetExpeditedLines(local!expdPagingInfo,ri!orders.order_number)),
            a!save(local!orderNumber,ri!orders.order_number)
          },
          style: "NORMAL",
          disabled: isnull(ri!orders.order_number)
        )
      },
      secondaryButtons: {}
    ),
   a!sectionLayout(
     contents: {
         a!gridField(
      label: "Expedite Line Section",
        totalCount: if(local!datasubset.totalCount=0,1,local!datasubset.totalCount),
        emptyGridMessage: "Please enter a valid number order number to search for eligible lines ",
        columns: {
        a!gridTextColumn(
          label:"Line Number",
          field:"line_number",
          data:index(local!datasubset.data,"line_number","")
        ),
         a!gridTextColumn(
          label:"Order Number",
          field:"order_number",
          data:index(local!datasubset.data,"order_number","")
        ),
         a!gridTextColumn(
          label:"Account Name",
          field:"account_name",
          data:index(local!datasubset.data,"account_name","")
        ), a!gridTextColumn(
          label:"Part",
          field:"ordered_item",
          data:index(local!datasubset.data,"ordered_item","")
        ),
         a!gridTextColumn(
          label:"Description",
          field:"description",
          data:index(local!datasubset.data,"description","")
        ),
         a!gridTextColumn(
          label:"Quantity",
          field:"quantity",
          data:index(local!datasubset.data,"quantity","")
        ),
         a!gridTextColumn(
          label:"RequestDate",
          field:"request_date",
          data:index(local!datasubset.data,"request_date","")
        ),
         a!gridTextColumn(
          label:"ScheduleShipDate",
          field:"schedule_ship_date",
          data:index(local!datasubset.data,"schedule_ship_date","")
        ),
         a!gridTextColumn(
          label:"OrganizationCode",
          field:"organization_code",
          data:index(local!datasubset.data,"organization_code","")
        ),
         a!gridTextColumn(
          label:"SourceOrgCode",
          field:"source_org_code",
          data:index(local!datasubset.data,"source_org_code","")
        )
      },
        identifiers:index(local!datasubset.data, "line_id" ,  "{}"),
      value: local!gridSelection,
          saveInto: {
            local!gridSelection,
            a!save(
              local!rowData,
              index(local!datasubset.data,
              wherecontains(
      local!gridSelection.selected,
      local!datasubset.identifiers
    ),{})
            )
          },
       showWhen: if(index(local!datasubset,"totalCount","") >0,true(),false()),
       selection:if(index(local!datasubset,"totalCount","") >0,true,false)
    ),
      a!sectionLayout(
      label:"Expedite Single Line Request",
      contents: {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!textField(
            label: "Line Number",
              value: local!rowData.line_number,
              readOnly: true
            ),
            a!textField(
              label: "Order Number",
              value: local!rowData.order_number,
              readOnly: true
            ),
            a!textField(
             label: "Customer Name",
              value: local!rowData.account_name,
              readOnly: true
            ),
            a!textField(
             label: "Part Number",
              value: local!rowData.ordered_item,
              readOnly: true
            ),
            a!textField(
             label: "Description",
              value: local!rowData.description,
              readOnly: true
            ),
             a!textField(
             label: "Quantity",
              value: local!rowData.quantity,
              readOnly: true
            ),
             /*a!dropdownField(*/
              /*label:"Tier Value",*/
              /*placeholderLabel: "--- Select Tier Value ---",*/
              /*choiceLabels: index(rule!EXP_GetEBSLookupValuesbyCode("PANDUIT_EXPEDITE_TIERS"),"meaning",null),*/
              /*choiceValues: rule!EXP_GetEBSLookupValuesbyCode("PANDUIT_EXPEDITE_TIERS"),*/
              /*value:local!selectedTierValue,*/
              /*saveInto: local!selectedTierValue,*/
              /*required: true()*/
            /*),*/
              a!dropdownField(
              label:"Reason Code",
              placeholderLabel: "--- Select a Reason Code ---",
              choiceLabels: index(rule!EXP_GetEBSLookupValuesbyCode("PANDUIT_EXPEDITE_REASONS"),"meaning",null),
              choiceValues: rule!EXP_GetEBSLookupValuesbyCode("PANDUIT_EXPEDITE_REASONS"),
              value:local!selectedReasonCode,
              saveInto: local!selectedReasonCode,
              required: true()
            ),
            a!textField(
              label: "Expedite Fee",
              value: local!expediteFee,
              saveInto: local!expediteFee
            ),
               a!dropdownField(
              label:"Fee Reason",
              placeholderLabel: "--- Select a Reason Code ---",
              choiceLabels: index(rule!EXP_GetEBSLookupValuesbyCode("PANDUIT_EXPEDITE_FEE_REASONS"),"meaning",null),
              choiceValues: rule!EXP_GetEBSLookupValuesbyCode("PANDUIT_EXPEDITE_FEE_REASONS"),
              value:local!selectedFeeReasonCode,
              saveInto: local!selectedFeeReasonCode
            )
          }
        ),
        a!columnLayout(
          contents: {
           
            a!textField(
              label: "Carbon Copy",
              value: local!carbonCopy,
              saveInto: local!carbonCopy
            ),
            a!textField(
              label: "Current Scheduled Date",
              value: local!rowData.schedule_ship_date,
              readOnly: true
            ),
            a!textField(
              label:"Request Date",
                value:local!rowData.request_date,
                readOnly: true()
            ),
          a!dropdownField(
             label: "Partials Accepted",
             labelPosition: "ABOVE",
             placeholderLabel: "--- Select a Value ---",
             choiceLabels: {
                   "Yes",
                   "No"
                          },
             choiceValues: {
                   "Y",
                   "N"
                          },
             value: local!selectedYesNo,
             saveInto: local!selectedYesNo
                      ),
          a!textField(
            label:"Partial Quantity",
            value:local!partialQuantity,
            saveInto: local!partialQuantity
          ),
          a!textField(
            label:"Initiator Comments",
            value:local!initiatorComments,
            saveInto: local!initiatorComments
          )
          }
        )
      }
    )
  },
  showWhen: if(or(isnull(local!rowData),or(length(local!gridSelection.selected)=0,length(local!gridSelection.selected)>1)),false,true)
    ),
        a!buttonLayout(
      primaryButtons: {
        a!buttonWidgetSubmit(
          label:"EXPEDITE",
          value:"SUBMIT",
          saveInto: {
            a!save(
              local!expediteData, a!toJson({
        "lineNumber":local!rowData.line_number,
        "orderHeaderId":local!rowData.header_id,
        "lineId":local!rowData.line_id,
        "orderType":"OE",
        "lineCount":count(local!rowData.header_id),
        "tier":index(local!selectedTierValue,"meaning",null),
        "reasonCode":index(local!selectedReasonCode,"meaning",null),
        "feeReasonCode":index(local!selectedFeeReasonCode,"meaning",null),
        "fee":local!expediteFee,
        "initiatorComments":local!initiatorComments,
        "partialQuantity":local!partialQuantity,
        "partialsAccepted":local!selectedYesNo,
        "carbonCopy":local!carbonCopy,
        "user":loggedInUser()
        
      })
            ),
            a!save(ri!orders.line_id,local!rowData.line_id),
            rule!EXP_BPM_Expereience_API(
              body: local!expediteData,
                 onSuccess: {
                   a!httpResponse_17r4(
                   statusCode: 200,
                   headers: {
                   a!httpHeader(name: "Content-Type", value: "application/json")
                            },
                  body: a!toJson_17r1(fv!result)
                   ) ,
                    a!save(ri!orders.line_id,local!rowData.line_id),
                    a!save(local!apiResult,fv!result),
                    a!save(ri!reqLineArray,index(a!fromJson(local!apiResult.body),"reqLineId",null))
                 }
            )
          },
          showWhen: if(isnull(local!rowData),false,true)
        )
       
      },
      secondaryButtons: {}
    ),
        a!sectionLayout(
      label:"Expedite Multiple Line Request",
      contents: {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
             /*a!dropdownField(*/
              /*label:"Tier Value",*/
              /*placeholderLabel: "--- Select Tier Value ---",*/
              /*choiceLabels: index(rule!EXP_GetEBSLookupValuesbyCode("PANDUIT_EXPEDITE_TIERS"),"meaning",null),*/
              /*choiceValues: rule!EXP_GetEBSLookupValuesbyCode("PANDUIT_EXPEDITE_TIERS"),*/
              /*value:local!selectedTierValue,*/
              /*saveInto: local!selectedTierValue,*/
              /*required: true()*/
            /*),*/
              a!dropdownField(
              label:"Reason Code",
              placeholderLabel: "--- Select a Reason Code ---",
              choiceLabels: index(rule!EXP_GetEBSLookupValuesbyCode("PANDUIT_EXPEDITE_REASONS"),"meaning",null),
              choiceValues: rule!EXP_GetEBSLookupValuesbyCode("PANDUIT_EXPEDITE_REASONS"),
              value:local!selectedReasonCode,
              saveInto: local!selectedReasonCode,
              required: true()
            ),
            a!textField(
              label: "Expedite Fee",
              value: local!expediteFee,
              saveInto: local!expediteFee
            ),
               a!dropdownField(
              label:"Fee Reason",
              placeholderLabel: "--- Select a Reason Code ---",
              choiceLabels: index(rule!EXP_GetEBSLookupValuesbyCode("PANDUIT_EXPEDITE_FEE_REASONS"),"meaning",null),
              choiceValues: rule!EXP_GetEBSLookupValuesbyCode("PANDUIT_EXPEDITE_FEE_REASONS"),
              value:local!selectedFeeReasonCode,
              saveInto: local!selectedFeeReasonCode
            ),
                     
            a!textField(
              label: "Carbon Copy",
              value: local!carbonCopy,
              saveInto: local!carbonCopy
            ),
          a!dropdownField(
             label: "Partials Accepted",
             labelPosition: "ABOVE",
             placeholderLabel: "--- Select a Value ---",
             choiceLabels: {
                   "Yes",
                   "No"
                          },
             choiceValues: {
                   "Y",
                   "N"
                          },
             value: local!selectedYesNo,
             saveInto: local!selectedYesNo
                      ),
          a!textField(
            label:"Partial Quantity",
            value:local!partialQuantity,
            saveInto: local!partialQuantity
          ),
          a!textField(
            label:"Initiator Comments",
            value:local!initiatorComments,
            saveInto: local!initiatorComments
          )
          }
        )
      }
    )
  },
  showWhen: if(or(isnull(local!rowData),or(length(local!gridSelection.selected)=0,length(local!gridSelection.selected)=1)),false,true)
    ),
        a!gridField(
      label: "Expedited Order Lines Info",
      instructions: "To Re-Submit or Cancel the expedited lines, please go to Records Tab and use Related Actions.",
      totalCount: index(local!expDataSubset, "totalCount", 0),
      columns: {
          a!gridTextColumn(
          label:"Line Number",
          field:"line_number",
          data:index(local!expDataSubset.data,"line_number","")
        ),
         a!gridTextColumn(
          label:"Order Number",
          field:"order_number",
          data:index(local!expDataSubset.data,"order_number","")
        ),
         a!gridTextColumn(
          label:"Source Type",
          field:"expedite_source_type",
          data:index(local!expDataSubset.data,"expedite_source_type","")
        ),
         a!gridTextColumn(
          label:"Item Number",
          field:"item_number",
          data:index(local!expDataSubset.data,"item_number","")
        ),
         a!gridTextColumn(
          label:"Item Description",
          field:"item_description",
          data:index(local!expDataSubset.data,"item_description","")
        ),
         a!gridTextColumn(
          label:"Customer Number",
          field:"customer_number",
          data:index(local!expDataSubset.data,"customer_number","")
        ),
         a!gridTextColumn(
          label:"Quantity",
          field:"quantity",
          data:index(local!expDataSubset.data,"quantity","")
        ),
         a!gridTextColumn(
          label:"Mfg Source Org Code",
          field:"mfg_source_org_code",
          data:index(local!expDataSubset.data,"mfg_source_org_code","")
        ),
         a!gridTextColumn(
          label:"Schedule Ship Date",
          field:"curr_scheduled_ship_date",
          data:index(local!expDataSubset.data,"curr_scheduled_ship_date","")
        ),
         a!gridTextColumn(
          label:"Mfg Org Code",
          field:"item_mfg_org_code",
          data:index(local!expDataSubset.data,"item_mfg_org_code","")
        ),
        a!gridTextColumn(
          label:"Ship From",
          field:"ship_from",
          data:index(local!expDataSubset.data,"ship_from","")
        ),
          a!gridTextColumn(
          label:"Status",
          field:"status",
          data:index(local!expDataSubset.data,"status","")
        )
      },
      value: local!expdPagingInfo,
      showWhen: if(index(local!expDataSubset,"totalCount",0)>0,true(),false())
    )
     }
   )
    
    
  }
)))

With(

a!formLayout(
contents:{
a!sectionLayout(),
a!sectionLayout()
}
)
)

Use the following method snippet. Excuse for the formmatting.

Thanks,
Abishek

I think you can contain them inside the load if you wish to. All you need to do is set the showWhen property to a function that determines if the local variables you're referencing have the values you intend. You can create an entire section that shows all the contents only when the values you intend to show are set properly by the query, or set the showWhen on a boolean flag that you trip when you press the button / make a selection. It should work equally well if nested inside the with() or the load().

Another thing that might help is to know that load() and with() both take any number of local variables and then only 1 expression. However, that 1 expression can be a list. {}

with(
local!one,
local!two,
{
a!sectionLayout(...),
a!sectionLayout(...),
a!billboardLayout(...),
a!columnsLayout(...),
a!sectionLayout(...)
}
)

That's valid SAIL. Your list of 5 separate layouts is your 1 and only 1 expression. Curly braces are how you nest all the things in your with(). You can use the formLayout, and that could very well be the best design option for you; please consider it. But you aren't absolutely required to.

I think you can use a local variable for each section which controls the showWhen component of each those section and enable or disable them based on conditon. Move the with function on top of the form layout and also my suggestion is to split this form into different interfaces and plug them in so that you can test of the section independently, Will also help you with writing testing scripts as well.

Sri

Hi,

I have observed that you have not kept {} after with. If you are creating multiple components or layouts use it inside {}. Local variable should be out side of {}.

load(
local!var1,
local!var2,
a!formLayout(
contents: {
a!textField(),
a!textField(),
a!columnsLayout(),
a!sectionLayout(),
a!billboardLayout(),
with(
local!var3,
local!var4,
{
a!textField(),
a!textField(),
a!columnsLayout(),
a!sectionLayout(),
a!billboardLayout()
}
)
}
)
)