Complete the empty space to save space

RE: Complete the empty space to save space

Chris — Thu, 10 Nov 2022 19:28:47 GMT

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" }
                      )
                    }
                  )
                }
              )
            }
          )
        }
      )
    }
  )
)

RE: Complete the empty space to save space

danna3499 — Thu, 10 Nov 2022 13:51:03 GMT

i try it, but it doesn't work 😞

RE: Complete the empty space to save space

Chris — Wed, 09 Nov 2022 18:13:36 GMT

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.

RE: Complete the empty space to save space

danna3499 — Wed, 09 Nov 2022 18:07:33 GMT

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" }
                      )
                    }
                  )
                }
              )
            }
          )
        }
      )
    }
  )
)

RE: Complete the empty space to save space

Chris — Wed, 09 Nov 2022 18:06:01 GMT

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.