---
category: [Administration & Integrations, Platform and Product Extensions, Platform and Product Extensions/Integration, Administration & Integrations/Custom Integrations & Apps, Platform and Product Extensions/Workday Extend]
keyword: [Extend, Presentation Components, widgets, tags, UI components]
nav: wcp_docs
parent_url: /wcp_docs/
title: labeledImage
layout: subsection
wd_wcptag: labeledImage
---

<a id="section_N10021_N1001E_N10001"></a>
Displays either an image provided by the `imageURL` attribute or an image icon provided by the `charm` attribute. You can display additional text with the labeled image using the `imageLabel` attribute.

Use `labeledImage` on view and edit pages.

## <a id="section_kxv_dpm_xpb"></a>Example

This `labeledImage` displays the address icon next to a worker address:

```
{
 "type": "section",
 "horizontal": true,
 "columnWidthRatios": [
     0.1,
     0.9
 ],
 "children": [
   {
     "type": "labeledImage",
     "charm": "ADDRESS",
     "label": "Location:"
   },
   {
     "type": "text",
     "id": "addressText",
     "enabled": false,
     "value": "<% workerContactInfo.data[0].workAddress_Full.replace('&#xa;', ', ') %>"
   }
 ]
}
```

## <a id="section-mobile-support"></a>Mobile Support

Android, iOS

## <a id="section_qpw_1kc_ccb"></a>Attributes

-   <b>charm</b>

    Data type: charm

    Identifies an icon. Example: If you specify `"charm" : "FACEBOOK"`, the widget renders a Facebook icon. Valid values:

    -   ADDRESS
    -   AOL_CHAT
    -   CLOUD_GRAY
    -   CREATE
    -   EDIT
    -   EMAIL
    -   FACEBOOK
    -   FOLDER
    -   GOOGLE
    -   IBM_CONNECTIONS
    -   INBOX_GRAY
    -   INSTANCE
    -   JOB_REQ
    -   JOB_TYPE
    -   LINKED_IN
    -   LOCATION
    -   LYNC_CHAT
    -   MSN_CHAT
    -   POSTED_DATE
    -   SAML
    -   SEARCH
    -   SEARCH_ICON
    -   SKYPE_CHAT
    -   SUBFOLDER
    -   TRASH
    -   TWITTER
    -   XING
    -   YAHOO_CHAT
    -   YELP

-   <b>id</b>

    Data type: binding-String

    Unique identifier used to reference this widget from other tags.

    Notes:

    -   The `id` must start with a letter.
    -   The `id` must be unique per page.
    -   To enable other widgets to reference this widget `id`, place this widget before the other widgets on the PMD. The PMD validation returns an "Undefined variable" error if it doesn't find a previously defined `id` in the PMD.
    -   Workday recommends that you include the `id` in your tag definitions for debugging purposes.

-   <b>imageLabel</b>

    Data type: binding-String

    Text that displays for a labeled image.

-   <b>imageURL</b>

    Data type: binding-String

    The URL of the image to display. If you don't enter a value on the charm attribute, the `imageURL` defines the image to display.

-   <b>label</b>

    Data type: dynamicBinding-String

    Text that displays beside or above most widgets. Often used in simple widgets that include inputs.

    The maximum number of characters is 255.

-   <b>render</b>

    Data type: binding-Boolean

    If true, this tag renders as a widget on the page. If false, the loaded page doesn't add this tag or its children. The default is true.

    Unlike the `visible` attribute, when `render` is false, other tags on the page can't reference this tag or widget on edit pages. On view pages, a tag can't reference other tags regardless of the `render` attribute value.

-   <b>sortOrder</b>

    Data type: binding-String

    When you set `sorted` to true on the `section` or `fieldSet` parent of this widget, the `sortOrder` attribute determines the order of this widget within its parent. The sort order is relative to the siblings of the widget.

    Typical values are "a", "b", "c", and so on. Example: The widget with `"sortOrder": "a"` displays before the widget with `"sortOrder": "b"`.

    <b>Note:</b> The `sortOrder` doesn't apply to sorting data on the widget. `sortOrder` only applies to the placement order of the widgets within the parent widget.

-   <b>visible</b>

    Data type: dynamicBinding-Boolean

    If true, the widget generated by this tag is visible. If false, this tag and its children tags aren't visible. This tag provides the ability to display or hide the widget dynamically based on user interactions on the page. The default is true. Unlike the `render` attribute, the generated widget persists on the page even when `visible` is false.

    <b>Notes:</b>

    -   When the widget or field you’re hiding changes on the page, you must include it inside a `fieldSet`.
    -   When the `visible` attribute is false for this widget on an edit page, the outbound endpoint doesn't include the `valueOutBinding` or `valuesOut` data of the widget in the payload. To include the `valueOutBinding` or `valuesOut` data in the payload, use the `onSend` event handler.