Settings
AddonsCard design schemaModelsElement

Element

​​​​​​Base model from which the card elements inherit their properties.

Interface

interface AccessibilityProps {
  ariaLabel?: string;
  ariaLabelledBy?: string;
  role?: string;
  tabIndex?: number;
}
 
interface AnalyticsProps{
  'data-field'?: string;
}
 
interface IElement extends AccessibilityProps extends AnalyticsProps {
  type: ElementType;
  id?: string;
  className?: string;
  style?: React.CSSProperties | Interpolation;
  onClick?: onClickActions;
  onClickInsideIframe?: string;
  visible?: string | boolean;
  horizontalSeparator?: boolean;
  dataTestid?: string;
}

Properties

type

Specifies the type of element to display

"type": "Image"

id

A unique identifier associated with the element

  • Type: string

  • Required: No

className

Class name associated with the element

  • Type: string

  • Required: No

style

Inline styles with React CSS typescript format and support of emotion

  • Type: React.CSSProperties | Interpolation

  • Required: No

  • Example:

"style": {
  "width":"100%",
  "height":"143px",
  "objectFit":"cover",
  "&:hover":{
      "borderColor":"rgb(173, 173, 173)"
  }
}

onClick

Execute the card command onClick

​​​​​​​"onClick": {
     "type": "OpenUrl",
      "url": "https://www.google.es/"
 }

The onClick has a special property called updateData to manually update a data property.

Example:

"onClick": {
     "type": "FollowUser",
     "uniqueId": "o93836b-41d0-89hg-b309-423hhhjgu87",
     "account": "user@syntphony.onmicrosoft.com",
     "updateData": {
          "user.follow.count": 4
     }
 }

In this example, when onClick is executed, it will update the follow count of the data object to 4. This can be used to make immediate changes to the interface.

onClickInsideIframe

When the element is inside an iframe it executes this action instead of the onClick. This property works in the same way as onClick, it has the same properties and characteristics.

​​​​​​​"onClickInsideIframe": {
     "type": "OpenUrlNewTab",
      "url": "https://www.google.es/"
 }

visible

If false, this element will be removed from the visual tree. Also support conditional in string format

  • Type: string | boolean

  • Required: No

  • Example:

"visible":false
"visible": "@eval({fields.metaInfoUrlPage.hasData} && !{fields.syntphonyRelatedCard})"

Accessibility Properties

The following properties are inherited from AccessibilityProps:

ariaLabel

Defines a string value that labels the current element

  • Type: string

  • Required: No

"ariaLabel": "Close notification button"

ariaLabelledBy

Identifies the element (or elements) that labels the current element

  • Type: string

  • Required: No

"ariaLabelledBy": "notification"

role

Defines the role of the element in the accessibility tree

  • Type: string

  • Required: No

"role": "button"

tabIndex

Indicates if the element can be focused and the relative order for keyboard navigation

  • Type: number

  • Required: No

"tabIndex": 0

Analytics Properties

data-field

Add a custom attribute to the element. This is useful for analytics purposes or to identify the element in a specific context.

  • Type: string

  • Required: No

  • Example:

    Input:

    "data-field": "title"

    Result:

    <div data-title="Transform the way employees engage and communicate">...</div>
VideoElementType