• State Not Answered
  • Replies 2 replies
  • Subscribers 11 subscribers
  • Views 674 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

Card layout with date

TByrdHumanIT

Hello community I am trying to recreate this screenshot from another application    using a card layout. Can someone guide me in the right direction. Also in the other application when you hover over the card it says view detail  .

  Discussion posts and replies are publicly visible

  • 0
    Certified Senior Developer

    a!localVariables(
    local!show:false(),
    local!textcolor:if(
    local!show=false(),
    "#717d7e",
    "#17202a"
    ),
    a!columnsLayout(
    columns: {
    a!columnLayout(
    width: "MEDIUM",
    contents: a!cardLayout(
    tooltip: if(
    local!show=false(),
    "View Details",
    ""
    ),
    showBorder: false(),
    showShadow: if(
    local!show=false(),
    false(),
    true()
    ),
    style: if(
    local!show=false(),
    "#a9cce3",
    ""
    ),
    link: a!dynamicLink(
    saveInto: a!save(
    local!show,
    if(
    local!show=false(),
    true(),
    false()
    )

    )
    ),
    padding: "NONE",
    height:"SHORT_PLUS",
    contents: {
    a!columnsLayout(
    marginBelow: "NONE",
    marginAbove: "NONE",
    columns: {
    a!columnLayout(
    contents: {
    a!richTextDisplayField(
    labelPosition: "COLLAPSED"
    ),
    a!richTextDisplayField(),
    a!richTextDisplayField(
    marginAbove: "NONE",
    marginBelow: "NONE",
    value: {
    a!richTextItem(
    text: "Gift Number:",
    color:local!textcolor
    ),
    " ",
    a!richTextItem(
    text: "",
    color:local!textcolor
    )
    }
    ),
    a!richTextDisplayField(
    marginAbove: "NONE",
    marginBelow: "NONE",
    value: {
    a!richTextItem(
    text: "Total Value:",
    color:local!textcolor
    ),
    " ",
    a!richTextItem(
    text: "$100.00",
    color:local!textcolor
    )
    }
    ),
    a!richTextDisplayField(
    marginAbove: "NONE",
    marginBelow: "NONE",
    value: {
    a!richTextItem(
    text: "Total Gift:",
    color:local!textcolor
    ),
    " ",
    a!richTextItem(
    text: "0",
    color:local!textcolor
    )
    }
    ),
    a!richTextDisplayField(
    marginAbove: "NONE",
    marginBelow: "NONE",
    value: {
    a!richTextItem(
    text: "Recipient:",
    color:local!textcolor
    ),
    " ",
    a!richTextItem(
    text: ""
    )
    }
    ),
    a!richTextDisplayField(
    marginAbove: "NONE",
    marginBelow: "NONE",
    value: {
    a!richTextItem(
    text: "Donor:",
    color:local!textcolor
    ),
    " ",
    a!richTextItem(
    text: ""
    )
    }
    )
    }
    ),
    a!columnLayout(
    contents: {
    a!richTextDisplayField(),
    a!richTextDisplayField(),
    a!richTextDisplayField(),
    a!richTextDisplayField(),
    a!richTextDisplayField(
    showWhen: local!show=false(),
    value: a!richTextItem(
    text: "View Details",
    size: "SMALL",
    color : "#fdfefe",

    )
    )
    }
    ),
    a!columnLayout(
    width: "EXTRA_NARROW",
    contents: {
    a!cardLayout(
    showBorder: false(),
    marginBelow: "NONE",
    style: "#7fb3d5",
    contents: {
    a!richTextDisplayField(
    value: a!richTextItem(
    text: "15",
    size: "MEDIUM_PLUS",
    color:local!textcolor
    )
    )
    }
    ),
    a!cardLayout(
    showBorder: false(),
    marginAbove: "NONE",
    style: "#2980b9",
    padding:"NONE",
    contents: a!richTextDisplayField(
    labelPosition: "COLLAPSED",
    marginBelow :"NONE",
    value: {a!richTextItem(
    text: "Dec",
    style: "STRONG",
    size:"MEDIUM",
    color:local!textcolor
    ),
    " ",
    a!richTextItem(
    text: "22",
    style: "STRONG",
    size:"SMALL",
    color:local!textcolor
    )}
    )
    ),

    }
    )
    }
    ),
    a!richTextDisplayField(
    align: "RIGHT",
    labelPosition: "COLLAPSED",
    marginAbove: "NONE",
    marginBelow: "NONE",
    value: {
    a!richTextItem(
    text: "* Requires Review ",
    color:local!textcolor
    )
    }
    ),
    }
    )
    )
    }
    )
    )

© 2024 Appian. All rights reserved.