I started with a CardLayout and have a sideBysideLayout inside it. Inside this SideBySideLayout I have two SideBySideItem. The problem I'm facing is Inside one of this SideBySideItem I want to have two components. SideBySideLayout doesn't allow any other layouts, nor does it allow array of items.
PS: For reference this is being used in a Portal. Please see attached pic for layout if the descriptions seems confusing.
Discussion posts and replies are publicly visible
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.
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.
{ 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: {} ) } ) } ) }