Questions about images in Interfaces

RE: Questions about images in Interfaces

Aswini — Wed, 10 Oct 2018 07:55:17 GMT

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

RE: Questions about images in Interfaces

charlesm492 — Tue, 02 Oct 2018 14:32:19 GMT

In order to add an icon, you can do something like this:

a!richTextImage(
	image: a!documentImage(
		document: a!iconIndicator(
			icon: "OK"
		)
	)
)

RE: Questions about images in Interfaces

andrewr865 — Tue, 02 Oct 2018 14:30:56 GMT

Hi Eric,

You can upload images and then use a!documentImage or a!imageField to use them in an interface. a!imageField can also display images from the web. For best practices I would recommend checking out the UX Design Guide under the 'Designers' tab on docs.appian.com.

Thanks.

RE: Questions about images in Interfaces

hrishikeshd997 — Tue, 02 Oct 2018 14:02:55 GMT

Also please refer the UX design guide which is a collection of best practices and recommendations for creating attractive and usable interfaces. It has details around accessibility considerations for usage of documents and icons.
docs.appian.com/.../ux_icon_overview.html

RE: Questions about images in Interfaces

Mike Lasutschinkow — Tue, 02 Oct 2018 13:48:53 GMT

The steps to using a document image are as follows

1. Upload an image to your appian application, will be type Document

2. Create a constant of type Document and point it at your image

3. On your Appian interface, use a!imageField, example code snippet follows:

=a!imageField(
  label: "Label",
  images: {
    a!documentImage(
      document: cons!MY_IMAGE
    )
  }
)

As for Billboards, you can use a rich text component inside the OverlayContents of the billboard to show text