Power Platform Community Forum Thread Details

Hello @romovaro,

You can simply copy and paste the code below to create a sample card design view. After that, you can make any modifications as needed.

First, copy and paste the collection code below. You can either place it in the app's OnStart property or temporarily put it to a button's OnSelect property for testing purposes. Later on Gallery Items Property you need to use your ShaPoint list and replace all the column with it.

Collection code with dummy data:

ClearCollect(
    colUseCases,

    {
        Title:"AI Meeting Notes Generator",
        Function:"HR",
        Role:"Manager",
        UseCaseCategory:"Productivity",
        ProcessImpacted:"Meetings",
        UseCaseSummary:"Automatically creates meeting summaries.",
        PromptText:"Summarize this meeting transcript.",
        BusinessValueOutcomes:"Reduces admin work by 60%",
        VideoLink:"https://youtube.com"
    },

    {
        Title:"Invoice Processing Assistant",
        Function:"Finance",
        Role:"Analyst",
        UseCaseCategory:"Automation",
        ProcessImpacted:"Reporting",
        UseCaseSummary:"Extracts data from invoices.",
        PromptText:"Extract invoice number and amount.",
        BusinessValueOutcomes:"Saves 5 hours per week",
        VideoLink:"https://youtube.com"
    },

    {
        Title:"Job Description Generator",
        Function:"HR",
        Role:"Recruiter",
        UseCaseCategory:"Content Creation",
        ProcessImpacted:"Recruitment",
        UseCaseSummary:"Creates job descriptions automatically.",
        PromptText:"Create a JD for a Data Analyst.",
        BusinessValueOutcomes:"Faster hiring process",
        VideoLink:"https://youtube.com"
    }
)

Copy and Past below code directly into screen it will create the Gallery design:

- Gallery_UseCases_2:
    Control: Gallery@2.15.0
    Variant: Vertical
    Properties:
      Height: =768
      Items: =colUseCases
      TemplateSize: =240
      Width: =1366
      WrapCount: =2
    Children:
      - Card_BG_1:
          Control: GroupContainer@1.5.0
          Variant: ManualLayout
          Properties:
            BorderColor: =RGBA(230,230,230,1)
            BorderThickness: =1
            Fill: =RGBA(180, 214, 250, 0.14)
            Height: =Parent.TemplateHeight - 10
            RadiusBottomLeft: =12
            RadiusBottomRight: =12
            RadiusTopLeft: =12
            RadiusTopRight: =12
            Width: =Parent.TemplateWidth - 20
            X: =10
            Y: =5
      - lblTitle_2:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(32,32,32,1)
            FontWeight: =FontWeight.Bold
            Height: =35
            Size: =18
            Text: =ThisItem.Title
            Width: =600
            X: =25
            Y: =20
      - lblCategory_2:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(0,120,212,1)
            FontWeight: =FontWeight.Semibold
            Height: =25
            Text: =ThisItem.UseCaseCategory
            Width: =250
            X: =lblTitle_2.X
            Y: =lblTitle_2.Y + lblTitle_2.Height
      - lblSummary_2:
          Control: Label@2.5.1
          Properties:
            AutoHeight: =true
            Color: =RGBA(80,80,80,1)
            Height: =45
            Text: =ThisItem.UseCaseSummary
            Width: =Parent.TemplateWidth - Self.X
            X: =lblCategory_2.X
            Y: =lblCategory_2.Y + lblCategory_2.Height
      - lblPromptTitle_1:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(0,120,212,1)
            FontWeight: =FontWeight.Semibold
            Height: =25
            Text: ="Prompt"
            Width: =120
            X: =lblCategory_2.X
            Y: =lblSummary_2.Y + lblSummary_2.Height
      - lblPrompt_1:
          Control: Label@2.5.1
          Properties:
            AutoHeight: =true
            Text: =ThisItem.PromptText
            Width: =Parent.TemplateWidth - Self.X
            X: =lblPromptTitle_1.X
            Y: =lblPromptTitle_1.Y + lblPromptTitle_1.Height
      - lblBusinessValueTitle_1:
          Control: Label@2.5.1
          Properties:
            Color: =RGBA(0,120,212,1)
            FontWeight: =FontWeight.Semibold
            Height: =25
            Text: ="Business Value"
            X: =lblCategory_2.X
            Y: =lblPrompt_1.Height + lblPrompt_1.Y
      - lblBusinessValue_1:
          Control: Label@2.5.1
          Properties:
            Height: =30
            Text: =ThisItem.BusinessValueOutcomes
            Width: =Parent.TemplateWidth - Self.X
            X: =lblCategory_2.X
            Y: =190*1
      - btnVideo_2:
          Control: Classic/Button@2.2.0
          Properties:
            BorderThickness: =0
            Color: =RGBA(255,255,255,1)
            Fill: =RGBA(0,120,212,1)
            Height: =42
            OnSelect: =Launch(ThisItem.VideoLink)
            RadiusBottomLeft: =8
            RadiusBottomRight: =8
            RadiusTopLeft: =8
            RadiusTopRight: =8
            Text: ="▶ Watch Demo"
            Width: =150
            X: =Parent.TemplateWidth - Self.Width - 40
            Y: =30
      - btnDetails_1:
          Control: Classic/Button@2.2.0
          Properties:
            BorderColor: =RGBA(220,220,220,1)
            BorderThickness: =1
            Color: =RGBA(50,50,50,1)
            Fill: =RGBA(240,240,240,1)
            Height: =42
            OnSelect: =Set(g_SelectedUseCase, ThisItem)
            RadiusBottomLeft: =8
            RadiusBottomRight: =8
            RadiusTopLeft: =8
            RadiusTopRight: =8
            Text: ="View Details"
            Width: =150
            X: =btnVideo_2.X
            Y: =btnVideo_2.Y + btnVideo_2.Height + 10

Preview: