# component

{% hint style="info" %}
**Version compatibility**

`component` was introduced with version **4.38.5** of the JourneyApps Container.
{% endhint %}

This API allows developers to interact with various UI components programmatically in a view's JavaScript/TypeScript.

### Component Methods

{% hint style="info" %}
**Version compatibility**

Component methods were introduced with version **4.84.0** of the JourneyApps Runtime. One exception to this is `component.textInput({id: 'my-identifier'}).focus()`, which was introduced with version **4.81.1** of the runtime.
{% endhint %}

A UI component in JourneyApps may have component methods associated with it. These methods can be triggered in one of the following ways:

1. By the JourneyApps Runtime when a user interacts with a component (e.g. when a user clicks a button)
2. Programmatically inside a view's JavaScript / TypeScript. Example syntax: `component.textInput({id: 'my-identifier'}).focus();`
3. Using voice commands

A UI component's available methods and associated voice commands are listed in the **View Components** panel in OXIDE:

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-f85eb9bca1799bd9378f266fac176c25c4b29181%2Foxide-view-components-panel.png?alt=media)

### component.sidebarItem

Constructs a sidebar item from your view's JS.

Example usage:

{% code title="main.js" %}

```javascript
var item = component.sidebarItem({
    label: 'Home',
    icon: 'fa-home',
    iconColor: 'primary',
    onPress: function() {
      link.main();
    },
    onPressIcon: 'ion-chevron-right',
    state: 'normal'
});
```

{% endcode %}