Complete the empty space to save space

hi,

I want to Complete the empty space to save space, what are the best practices?

  Discussion posts and replies are publicly visible

  • This is all based on your interface design, by the looks of it you may have fixed-width columns, extra columns, etc.  You will need to share your interface code here for any assistance on which items are creating your spacing issue.

  • this is the expression of mu interface 

    a!localVariables(
      local!GroupsCompanies,
      local!selectedGroupsCompanies: local!GroupsCompanies[1],
      a!cardLayout(
        contents: {
          a!sectionLayout(
            label: "CWA Companies",
            contents: {
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!textField(
                        label: "Total companies",
                        labelPosition: "ADJACENT",
                        value: count(rule!CWA_GroupsAndCompanies()),
                        refreshAfter: "UNFOCUS",
                        readOnly: true,
                        validations: {}
                      )
                    }
                  ),
                  a!columnLayout(contents: {}),
                  a!columnLayout(contents: {})
                }
              ),
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!cardLayout(
                        contents: {
                          a!recordActionField(
                            actions: {
                              a!recordActionItem(
                                action: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.actions.{18dc1e70-f46a-4539-8adf-4ce9836cccf1}newCWA_GroupsAndCompanies'
                              )
                            },
                            style: "TOOLBAR",
                            display: "LABEL_AND_ICON",
                            align: "CENTER"
                          )
                        },
                        height: "AUTO",
                        style: "NONE",
                        marginBelow: "STANDARD",
                        showShadow: true
                      )
                    }
                  ),
                  a!columnLayout(contents: {})
                }
              ),
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!gridField(
                        label: "List of Groups/Companies",
                        labelPosition: "ABOVE",
                        data: a!recordData(
                          recordType: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies'
                        ),
                        columns: {
                          a!gridColumn(
                            label: "Id",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{ddcbc37f-6940-46ec-8d01-08503dc2748f}id',
                            value: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{ddcbc37f-6940-46ec-8d01-08503dc2748f}id'],
                            align: "END"
                          ),
                          a!gridColumn(
                            label: "Type",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{9be93997-eaac-477c-98aa-c69a1724e96f}type',
                            value: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{9be93997-eaac-477c-98aa-c69a1724e96f}type']
                          ),
                          a!gridColumn(
                            label: "Nombre",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{5c0759b9-2889-4c61-b4c5-a4280e35dc94}nombre',
                            value: a!linkField(
                              links: {
                                a!recordLink(
                                  label: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{5c0759b9-2889-4c61-b4c5-a4280e35dc94}nombre'],
                                  recordType: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies',
                                  identifier: fv!identifier,
                                  openLinkIn: "SAME_TAB"
                                )
                              }
                            )
                          ),
                          a!gridColumn(
                            label: "Descripcion",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{01836066-9eea-4126-9632-826ef3b52817}descripcion',
                            value: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{01836066-9eea-4126-9632-826ef3b52817}descripcion']
                          ),
                          a!gridColumn(
                            label: "Ciudad",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{16c23bd9-0621-4f5f-b8ca-66bcc134e5b1}ciudad',
                            value: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{16c23bd9-0621-4f5f-b8ca-66bcc134e5b1}ciudad']
                          ),
                          a!gridColumn(
                            label: "Direccion",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{22fce980-1aed-4816-ae73-4a4965715101}direccion',
                            value: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{22fce980-1aed-4816-ae73-4a4965715101}direccion']
                          ),
                          a!gridColumn(
                            label: "Ciruc",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{95b48f38-8ed9-416b-b1a0-b6e043375e65}ciruc',
                            value: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{95b48f38-8ed9-416b-b1a0-b6e043375e65}ciruc']
                          ),
                          a!gridColumn(
                            label: "Telefono",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{d8736630-4b5a-41b8-90d1-e964776c4318}telefono',
                            value: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{d8736630-4b5a-41b8-90d1-e964776c4318}telefono']
                          ),
                          a!gridColumn(
                            label: "Correo",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{3399f8ea-da44-4796-bbbb-ff12af2dd79c}correo',
                            value: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{3399f8ea-da44-4796-bbbb-ff12af2dd79c}correo']
                          ),
                          a!gridColumn(
                            label: "Isactive",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{2a313c78-bf66-4f77-9552-1039a59e9cf0}isactive',
                            value: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{2a313c78-bf66-4f77-9552-1039a59e9cf0}isactive']
                          ),
    
                        },
                        selectable: true,
                        selectionStyle: "ROW_HIGHLIGHT",
                        selectionValue: index(
                          local!selectedGroupsCompanies,
                          'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{ddcbc37f-6940-46ec-8d01-08503dc2748f}id',
                          {}
                        ),
                        selectionSaveInto: {
                          /* This save replaces the value of the previously selected item with that of the newly selected item, ensuring only one item can be selected at once.*/
                          a!save(
                            local!selectedGroupsCompanies,
                            if(
                              length(fv!selectedRows) > 0,
                              fv!selectedRows[length(fv!selectedRows)],
                              null
                            )
                          )
                        },
                        validations: {},
                        refreshAfter: "RECORD_ACTION",
                        showSearchBox: true,
                        showRefreshButton: true,
                        recordActions: {}
                      )
                    },
                    width: "WIDE"
                  ),
                  a!columnLayout(
                    contents: {
                      a!sectionLayout(
                        label: "Selected Companie/Group",
                        contents: {
                          a!richTextDisplayField(
                            value: a!richTextItem(
                              text: "No employee selected.",
                              color: "SECONDARY",
                              size: "MEDIUM",
                              style: "EMPHASIS"
                            ),
                            showWhen: isnull(local!selectedGroupsCompanies)
                          ),
                          a!columnsLayout(
                            columns: {
                              a!columnLayout(contents: {}),
                              a!columnLayout(contents: {}),
                              a!columnLayout(
                                contents: {
                                  /*Group Related */
                                  a!textField(
                                    label: "Nombre Empresa/Grupo",
                                    value: local!selectedGroupsCompanies['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.fields.{5c0759b9-2889-4c61-b4c5-a4280e35dc94}nombre'],
                                    readOnly: true
                                  ),
                                  a!textField(
                                    label: "ID group",
                                    value: local!selectedGroupsCompanies['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.relationships.{13a37923-fa03-4a4d-9aea-328eeea13b96}cwaGroupRelations.fields.{9f113ced-5b69-48ad-b8a4-7bc4dbfe3a96}idgroup'],
                                    readOnly: true
                                  ),
                                  a!textField(
                                    label: "Nombre group",
                                    value: local!selectedGroupsCompanies['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.relationships.{13a37923-fa03-4a4d-9aea-328eeea13b96}cwaGroupRelations.fields.{4fc39a51-02b0-4e3a-a914-dbefa8d7296d}nombregrupo'],
                                    readOnly: true
                                  ),
                                  a!textField(
                                    label: "Iden",
                                    value: local!selectedGroupsCompanies['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}CWA_GroupsAndCompanies.relationships.{13a37923-fa03-4a4d-9aea-328eeea13b96}cwaGroupRelations.fields.{4a514f57-3032-4dcf-9678-e101218bff07}iden'],
                                    readOnly: true
                                  )
                                }
                              )
                            },
                            showWhen: not(isnull(local!selectedGroupsCompanies)),
                            stackWhen: { "PHONE", "TABLET_LANDSCAPE" }
                          )
                        }
                      )
                    }
                  )
                }
              )
            }
          )
        }
      )
    )

  • This is due to all of the extra a!columnLayout()'s, I would suggest comment these out on lines 23,24,51,170,171 and you will see how the interface fills in the gaps.

  • If you replace with this code, what does the interface look like?

    a!localVariables(
      local!GroupsCompanies,
      local!selectedGroupsCompanies: local!GroupsCompanies[1],
      a!cardLayout(
        contents: {
          a!sectionLayout(
            label: "CWA Companies",
            contents: {
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!textField(
                        label: "Total companies",
                        labelPosition: "ADJACENT",
                        value: count(rule!CWA_GroupsAndCompanies()),
                        refreshAfter: "UNFOCUS",
                        readOnly: true,
                        validations: {}
                      )
                    }
                  ),
                  /*a!columnLayout(contents: {}),*/
                  /*a!columnLayout(contents: {})*/
                }
              ),
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!cardLayout(
                        contents: {
                          a!recordActionField(
                            actions: {
                              a!recordActionItem(
                                action: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.actions.{18dc1e70-f46a-4539-8adf-4ce9836cccf1}'
                              )
                            },
                            style: "TOOLBAR",
                            display: "LABEL_AND_ICON",
                            align: "CENTER"
                          )
                        },
                        height: "AUTO",
                        style: "NONE",
                        marginBelow: "STANDARD",
                        showShadow: true
                      )
                    }
                  ),
                  /*a!columnLayout(contents: {})*/
                }
              ),
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!gridField(
                        label: "List of Groups/Companies",
                        labelPosition: "ABOVE",
                        data: a!recordData(
                          recordType: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}'
                        ),
                        columns: {
                          a!gridColumn(
                            label: "Id",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{ddcbc37f-6940-46ec-8d01-08503dc2748f}',
                            value: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{ddcbc37f-6940-46ec-8d01-08503dc2748f}'],
                            align: "END"
                          ),
                          a!gridColumn(
                            label: "Type",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{9be93997-eaac-477c-98aa-c69a1724e96f}',
                            value: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{9be93997-eaac-477c-98aa-c69a1724e96f}']
                          ),
                          a!gridColumn(
                            label: "Nombre",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{5c0759b9-2889-4c61-b4c5-a4280e35dc94}',
                            value: a!linkField(
                              links: {
                                a!recordLink(
                                  label: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{5c0759b9-2889-4c61-b4c5-a4280e35dc94}'],
                                  recordType: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}',
                                  identifier: fv!identifier,
                                  openLinkIn: "SAME_TAB"
                                )
                              }
                            )
                          ),
                          a!gridColumn(
                            label: "Descripcion",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{01836066-9eea-4126-9632-826ef3b52817}',
                            value: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{01836066-9eea-4126-9632-826ef3b52817}']
                          ),
                          a!gridColumn(
                            label: "Ciudad",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{16c23bd9-0621-4f5f-b8ca-66bcc134e5b1}',
                            value: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{16c23bd9-0621-4f5f-b8ca-66bcc134e5b1}']
                          ),
                          a!gridColumn(
                            label: "Direccion",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{22fce980-1aed-4816-ae73-4a4965715101}',
                            value: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{22fce980-1aed-4816-ae73-4a4965715101}']
                          ),
                          a!gridColumn(
                            label: "Ciruc",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{95b48f38-8ed9-416b-b1a0-b6e043375e65}',
                            value: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{95b48f38-8ed9-416b-b1a0-b6e043375e65}']
                          ),
                          a!gridColumn(
                            label: "Telefono",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{d8736630-4b5a-41b8-90d1-e964776c4318}',
                            value: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{d8736630-4b5a-41b8-90d1-e964776c4318}']
                          ),
                          a!gridColumn(
                            label: "Correo",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{3399f8ea-da44-4796-bbbb-ff12af2dd79c}',
                            value: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{3399f8ea-da44-4796-bbbb-ff12af2dd79c}']
                          ),
                          a!gridColumn(
                            label: "Isactive",
                            sortField: 'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{2a313c78-bf66-4f77-9552-1039a59e9cf0}',
                            value: fv!row['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{2a313c78-bf66-4f77-9552-1039a59e9cf0}']
                          ),
    
                        },
                        selectable: true,
                        selectionStyle: "ROW_HIGHLIGHT",
                        selectionValue: index(
                          local!selectedGroupsCompanies,
                          'recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{ddcbc37f-6940-46ec-8d01-08503dc2748f}',
                          {}
                        ),
                        selectionSaveInto: {
                          /* This save replaces the value of the previously selected item with that of the newly selected item, ensuring only one item can be selected at once.*/
                          a!save(
                            local!selectedGroupsCompanies,
                            if(
                              length(fv!selectedRows) > 0,
                              fv!selectedRows[length(fv!selectedRows)],
                              null
                            )
                          )
                        },
                        validations: {},
                        refreshAfter: "RECORD_ACTION",
                        showSearchBox: true,
                        showRefreshButton: true,
                        recordActions: {}
                      )
                    },
                    width: "WIDE"
                  ),
                  a!columnLayout(
                    contents: {
                      a!sectionLayout(
                        label: "Selected Companie/Group",
                        contents: {
                          a!richTextDisplayField(
                            value: a!richTextItem(
                              text: "No employee selected.",
                              color: "SECONDARY",
                              size: "MEDIUM",
                              style: "EMPHASIS"
                            ),
                            showWhen: isnull(local!selectedGroupsCompanies)
                          ),
                          a!columnsLayout(
                            columns: {
                              /*a!columnLayout(contents: {}),*/
                              /*a!columnLayout(contents: {}),*/
                              a!columnLayout(
                                contents: {
                                  /*Group Related */
                                  a!textField(
                                    label: "Nombre Empresa/Grupo",
                                    value: local!selectedGroupsCompanies['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.fields.{5c0759b9-2889-4c61-b4c5-a4280e35dc94}'],
                                    readOnly: true
                                  ),
                                  a!textField(
                                    label: "ID group",
                                    value: local!selectedGroupsCompanies['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.relationships.{13a37923-fa03-4a4d-9aea-328eeea13b96}.fields.{9f113ced-5b69-48ad-b8a4-7bc4dbfe3a96}'],
                                    readOnly: true
                                  ),
                                  a!textField(
                                    label: "Nombre group",
                                    value: local!selectedGroupsCompanies['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.relationships.{13a37923-fa03-4a4d-9aea-328eeea13b96}.fields.{4fc39a51-02b0-4e3a-a914-dbefa8d7296d}'],
                                    readOnly: true
                                  ),
                                  a!textField(
                                    label: "Iden",
                                    value: local!selectedGroupsCompanies['recordType!{e34dd5f4-8480-48eb-b4c5-bc75ef70a165}.relationships.{13a37923-fa03-4a4d-9aea-328eeea13b96}.fields.{4a514f57-3032-4dcf-9678-e101218bff07}'],
                                    readOnly: true
                                  )
                                }
                              )
                            },
                            showWhen: not(isnull(local!selectedGroupsCompanies)),
                            stackWhen: { "PHONE", "TABLET_LANDSCAPE" }
                          )
                        }
                      )
                    }
                  )
                }
              )
            }
          )
        }
      )
    )