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

You want to show only cards whose number is divisible by 7,8 and 9 only? 
Or you want to show the cards everytime and only the number should be displayed when it is divisible by 7,8 and 9?

No, the cards to be displayed only whe the rows and coloumns are 7 8 9 number

Your problem is still not clear, please create this interface as your requirement in paint or any other application and share the snapshot so that it clears everyones doubt!

Your problem is still not clear, please create this interface as your requirement in paint or any other application and share the snapshot so that it clears everyones doubt!