Questions about images in Interfaces

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

  • 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

  • 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
  • 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.
  • In order to add an icon, you can do something like this:

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

  • 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

 Discussion posts and replies are publicly visible