How to add two layout inside a sideBySideItem

RE: How to add two layout inside a sideBySideItem

Abhay Dalsaniya — Tue, 06 Feb 2024 19:50:27 GMT

- For this particular use case, you don't need sideBySideLayout, the columnLayout will do the job.

- Have the columnLayout at top level and sideBySideLayout within it if requires.

RE: How to add two layout inside a sideBySideItem

Stefan Helzle — Tue, 06 Feb 2024 17:38:49 GMT

Use columns layouts for the course layout, and side by side layouts for the fine, single row adjustments.

RE: How to add two layout inside a sideBySideItem

Harshit Bumb (Appyzie) — Tue, 06 Feb 2024 17:15:05 GMT

{
  a!columnsLayout(
    columns: {
      a!columnLayout(
        contents: {
          a!imageField(
            label: "Image",
            labelPosition: "COLLAPSED",
            images: {
              a!documentImage(document: a!EXAMPLE_DOCUMENT_IMAGE())
            },
            size: "MEDIUM",
            isThumbnail: false,
            style: "STANDARD"
          ),
          a!richTextDisplayField(
            align: "CENTER",
            labelPosition: "COLLAPSED",
            value: { a!richTextItem(text: { "Styled Text" }) }
          )
        },
        width: "NARROW_PLUS"
      ),
      a!columnLayout(
        contents: {
          a!paragraphField(
            label: "Paragraph",
            labelPosition: "ABOVE",
            saveInto: {},
            refreshAfter: "UNFOCUS",
            height: "MEDIUM",
            validations: {}
          )
        }
      )
    }
  )
}

RE: How to add two layout inside a sideBySideItem

Arib — Tue, 06 Feb 2024 17:10:28 GMT

Can you please guide me with the layout so that I can align one of the Item on the right and the other two(Img & text) being on top of each other. while keeping these two on the left. If I use the columnsLayout I would be keeping the Image on top of the two items(rich Text component & sideBySideItem).

while the sideBySideItem on the 'right' has a lot of details which should be highlighted.

Also, this image pretty decent size, I had tried with richTextItem but it becomes too small to be visible.

RE: How to add two layout inside a sideBySideItem

Konduru Chaitanya — Tue, 06 Feb 2024 17:03:53 GMT

Hello Arib

It is not supported to do so in Side By side layout. You will have to use a!columnsLayout() to do so.
Look at these for more ideas on using columns layout.

Sail Design System-UX_Columns_Layout

RE: How to add two layout inside a sideBySideItem

Harshit Bumb (Appyzie) — Tue, 06 Feb 2024 17:01:49 GMT

You can't. You will have to switch to columnsLayout()

And if your rich image is just a small square-shaped image you want to display, then you can add it in the same richTextDisplayField using a!richTextImage and a!richTextItem. Use char(10) between them to add a new line.