How to make link field more like a button field

Question

So the 5 text fields in the bottom of the page are actually link fields. This is a Landing page i was supposed to create which is still in progress. And the link fields lead to another site, but as you can see above they are very plain and unattractive to call them as a site. Is there any way that i can make these link fields more presentable and in a nice way so that this site can be called a WEBSITE. 
 
 Thanks and Regards.

Harsha Sharma · Accepted Answer

There is a pattern in Interface->Patterns. Have a look at it for inspirations around this design. 
 
 You can try Cards as Buttons or Tabs patterns

Stefan Helzle · Answer

A LinkField can't do that. But there is the safeLink() which you can use on multiple components like images, cards etc. 
 docs.appian.com/.../Web_Link_Component.html

Mike Schmitt · Answer

skzahed_09 said: So i just wanted to know is there is any other way if i can make the link field more presentable 
 As Stefan already said above, Card Layouts are probably what you want to look into. 
 docs.appian.com/.../cards-as-buttons-pattern.html

Shubham Aware · Answer

There are multiple ways you can achieve this type of landing page. I would recommend using a billboard layout with overlay. See the example UI for your reference - you can modify it as per your needs, as multiple modifications are possible. {
 a!billboardLayout(
 backgroundMedia: a!documentImage(document: a!EXAMPLE_BILLBOARD_IMAGE()),
 backgroundMediaPositionHorizontal: "CENTER",
 backgroundMediaPositionVertical: "MIDDLE",
 backgroundColor: "#000000",
 overlay: a!barOverlay(
 contents: {
 {
 a!localVariables(
 local!options: {
 a!map(icon: "home", name: "Admin"),
 a!map(icon: "building", name: "Recruiter"),
 a!map(icon: "building", name: "Vendor"),
 a!map(icon: "building", name: "Panel"),
 a!map(icon: "building", name: "Candidate")
 },
 a!columnsLayout(
 columns: {
 a!columnLayout(),
 a!forEach(
 items: local!options,
 expression: a!columnLayout(
 contents: {
 a!cardLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextIcon(
 icon: fv!item.icon,
 color: "#8CA1D0",
 size: "SMALL"
 ),
 char(10),
 a!richTextItem(
 text: fv!item.name,
 color: "ACCENT",
 size: "SMALL",
 style: "STRONG"
 ),
 
 },
 align: "CENTER"
 )
 },
 link: a!dynamicLink(
 saveInto: a!save(local!selectedCard, fv!item.name)
 ),
 height: "EXTRA_SHORT",
 shape: "ROUNDED",
 style: "INFO"
 )
 },
 width: "MEDIUM"
 )
 ),
 a!columnLayout()
 },
 marginBelow: "STANDARD"
 ),
 
 )
 }
 },
 style: "SEMI_DARK",
 
 ),
 
 )
}

How to make link field more like a button field

Top Replies