Display Card as grid

You just described what you want, but I miss any specific question?

Hi Stefen,

I m missing the logic for numbering the grid of cards in order(i have used coloumn *row calcualtion), and i wanna apply the condition visibility without re arranging the cards. Not getting the desired output

So let's start the guessing-game!

I guess you use a foreach. In case you want to render two dimensions, probably two nested ones. Based on the fv!index values, you should be able to give a number to each card.

I am happy to give more tips in trade-in for more details.

I think it's time to share this blog

codeblog.jonskeet.uk/.../

Yeah stefen this is what i did. Now for the next row the numbering is mismatching, it should be 16 ryt.

{
a!localVariables(
local!houses: 15,
local!numCols: 15, /* Change this to set a different number of columns. If you change this number, consider updating the stackWhen parameter on the columns layout */

{
a!columnsLayout(
columns: a!forEach(
items:enumerate(local!numCols)+1,
expression: a!localVariables(
local!colIndex: fv!index,
a!columnLayout(
contents: {
a!forEach(
items: enumerate(15)+1,
expression: a!cardLayout(
contents: {a!richTextDisplayField(
value:a!richTextItem(
text:local!colIndex*fv!item
)
)},
height: "SHORT",
/*showWhen:or(if(mod(local!colIndex*fv!item,7)=0,true,false),*/
/*if(mod(local!colIndex*fv!item,8)=0,true,false),*/
/*if(mod(local!colIndex*fv!item,9)=0,true,false),),*/


/*showWhen: or(mod(fv!index, local!numCols) = local!colIndex, and(mod(fv!index, local!numCols) = 0, local!colIndex = local!numCols)),*/
padding: "NONE",
marginBelow: "NONE"
)
)
},
width: ""
)
)
),
alignVertical: "TOP",
spacing: "NONE",

stackWhen: {
"PHONE",
"TABLET_PORTRAIT"
}
)
}
)
}

Above is the the code i have been finding issuesz with

I use the following reusable expression to turn a list of items into a two-dimensional matrix. Then two nested foreaches to display it.

The number can be calculated somewhat (Not tested, out of my head) like:

(sizeOuterList * (outerIndex - 1)) + innerIndex

-----------

Rule inputs:

- items (Any)

- segmentSize (Integer)

- rotate (Boolean)

- enablePadding (Boolean)

if(
  or(
    a!isNullOrEmpty(ri!items),
    a!isNullOrEmpty(ri!segmentSize)
  ),
  ri!items,
  a!localVariables(
    local!numSegments: ceiling(count(ri!items) / ri!segmentSize),
    if(
      ri!rotate,
      /* WITH ROTATION: segmentSize means the number of segments */
      if(
        ri!enablePadding,
        /* WITH PADDING: Adds type casted NULL values to the last segment to fill up to the size of the segment */
        a!forEach(
          items: enumerate(ri!segmentSize),
          expression: index(
            ri!items,
            1 /* First item in list is at index 1 and enumerate creates numbers starting at 0 */
            + fv!item /* Start number for current segment */
            /* Fix segment size */
            + enumerate(local!numSegments)
            * ri!segmentSize,
            cast(runtimetypeof(ri!items[1]), null)
          )
        ),
        /* WITHOUT PADDING: Only add left over items into the last segment. The last segment might contain less items */
        a!forEach(
          items: enumerate(ri!segmentSize),
          expression: reject(
            a!isNullOrEmpty(_),
            index(
              ri!items,
              1 /* First item in list is at index 1 and enumerate creates numbers starting at 0 */
              + fv!item /* Start number for current segment */
              /* Adjust the size of the segment to either the required size or for the last segment the left over items */
              + enumerate(local!numSegments)
              * ri!segmentSize,
              null
            )
          )
        )
      ),
      /* WITHOUT ROTATION: segmentSize means the number of items per segment */
      if(
        ri!enablePadding,
        /* WITH PADDING: Adds type casted NULL values to the last segment to fill up to the size of the segment */
        a!forEach(
          items: enumerate(local!numSegments),
          expression: index(
            ri!items,
            1 /* First item in list is at index 1 and enumerate creates numbers starting at 0 */
            + (fv!item * ri!segmentSize) /* Start number for current segment */
            /* Fixe segment size */
            + enumerate(ri!segmentSize),
            cast(runtimetypeof(ri!items[1]), null)
          )
        ),
        /* WITHOUT PADDING: Only add left over items into the last segment. The last segment might contain less items */
        a!forEach(
          items: enumerate(local!numSegments),
          expression: index(
            ri!items,
            1 /* First item in list is at index 1 and enumerate creates numbers starting at 0 */
            + (fv!item * ri!segmentSize) /* Start number for current segment */
            /* Adjust the size of the segment to either the required size or for the last segment the left over items */
            + enumerate(min(ri!segmentSize, count(ri!items) - (fv!item * ri!segmentSize))),
            null
          )
        )
      )
    )
  )
)