Questions about images in Interfaces

erics171 over 5 years ago

Hi all,

I have just passed the Appian Designer test. However, much of it was theory. I am not practically trying to build applications and need some help. I have some questions on images:

1. How do I simply add an Appian Icon to my interface?

2. How do I add an image (I believe I have to upload it as a document object then refer to it)?

3. On Billboards, I can easily add an image but I can't seem to add text in the billboard, how do I add text?

What is the best practices in adding an image?

Thank you for your help.

Eric

Discussion posts and replies are publicly visible

Parents

0 Aswini over 5 years ago

Hi Eric,

1) You can add Appian icons to your interface by using a!richTextIcon( ), a!iconIndicator( ), a!iconNewsEvent( )

And, you can check the Available Icons from this link

https://docs.appian.com/suite/help/18.2/Styled_Icon_Component.html#available-icons

Refer this code snippet

{
 a!richTextDisplayField(
    label: "Icon",
    value: a!richTextIcon(
      icon: "thumbs-o-up",
      size: "LARGE"
    )
  ),
  a!imageField(
    label: "Icon Indicator",
    images: a!documentImage(
      document: a!iconIndicator(
        icon: "STATUS_OK"
      )
    )
  ),
  a!imageField(
    label: "Document image",
    images: a!documentImage(
      document: a!iconNewsEvent(
        icon: "BOOK"
      )
    )
  )
}

2) You can add images by using a!imageField( )

We have web images, user images, and document images. You need to upload a document and place that in one constant.

sample code snippet

 a!imageField(
    label: "Images",
    images: {
      a!webImage(
        source: ""
      ),
      a!userImage(
        user: ""
      ),
      a!documentImage(
        document: cons!CONST_IMG
      )
    }
  )

3) On Billboards, You can add text through overlay Contents by using a!richTextDisplayField( )

Refer to this sample code snippet

 a!billboardLayout(
    backgroundMedia: a!documentImage(
      document: a!EXAMPLE_BILLBOARD_IMAGE()
    ),
    overlaypositionbar: "TOP",
    overlayStyle: "DARK",
    overlayContents: {
      a!richTextDisplayField(
        label: "",
        labelPosition: "ABOVE",
        value: {
          a!richTextItem(
            text: {
              "Appian"
            },
            size: "LARGE",
            style: {
              "STRONG",
              "EMPHASIS"
            }
          )
        }
      )
    }
  )

Hope this helpful

Thanks and Regards,

Aswini

Reply