# methodCall

## Description

Runs the method using the object assigned in context parameter.

## Input / Parameter

| Name      | Description                                               | Input Type | Default | Options | Required |
| --------- | --------------------------------------------------------- | ---------- | ------- | ------- | -------- |
| context   | This is the context (object) that the method will run on. | Object     | -       | -       | Yes      |
| method    | The method to run or call.                                | Object     | -       | -       | Yes      |
| arguments | The arguments that will be passed to method.              | Array/List | -       | -       | Yes      |

## Output

| Description                                                                                                                                                                              | Output Type |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| The return type of methodCall depends on the function that is passed as the method. Specifically, it will return the result of invoking the method with the given context and arguments. | Any         |

## Example

In this example, we will use function `methodCall` to add a new div element in the document body by getting `document` object using `resolveJSName` function.

### Code Equivalent

```
// Create div element
var div = document.createElement("div");

// Add some attribute to the div
div.className = "class";

// Add to the body
document.body.appendChild(div);
```

### Steps

1. Drag a `button` component into the canvas and open the `Action` tab. Select the `press` event of the button and drag the `setVar` function to the event flow.
2. On `setVar` function `var` param add `div` as the value and on it's `value` param add a subflow and drag a function `methodCall`.
3. On it's `context` param add a subflow and drag a function `resolveJSName`, on it's `name` param add the value `document`.

   ![](https://399701567-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwmJ1RKjM2uNFaL6fO3Xu%2Fuploads%2Fgit-blob-aa927dcc4293b34cf9802cb1391c955dab1615a7%2FmethodCall-step-1.png?alt=media)
4. On it's `method` param add a subflow and drag a function `objectAttr`, on it's `object` param add a subflow and drag a function `resolveJSName`, on it's `name` param add the value `document`. Back on the function `objectAttr` on it's `attr` param add the value `createElement`.

   ![](https://399701567-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwmJ1RKjM2uNFaL6fO3Xu%2Fuploads%2Fgit-blob-9853e05a858ebf294b815b420d86a29d4aacb3a6%2FmethodCall-step-2.png?alt=media)
5. On it's `arguments` param add a subflow and drag a function `toArray`, on it's `value1` param add the value `div`.

   ![](https://399701567-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwmJ1RKjM2uNFaL6fO3Xu%2Fuploads%2Fgit-blob-32a3edd42aa96da8d259ac2f3c4095466ce86143%2FmethodCall-step-3.png?alt=media)
6. Back to main flow, drag the `setObjectAttr` function to the event flow, on it's `object` param add a subflow and drag a function `getVar`, on it's `var` param add the value `div`. As for the `attr` param add the value `className` and for the `value` param add the value `class`.

   ![](https://399701567-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwmJ1RKjM2uNFaL6fO3Xu%2Fuploads%2Fgit-blob-19682bfdd86a5503c731688e930f5954926401ea%2FmethodCall-step-4.png?alt=media)
7. Back to main flow, drag the `methodCall` function to the event flow, on it's `context` param add a subflow and drag a function `resolveJSName`, on it's `name` param add the value `document.body`.

   ![](https://399701567-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwmJ1RKjM2uNFaL6fO3Xu%2Fuploads%2Fgit-blob-0336790b3ed837597c0184bfa6b265bc97443732%2FmethodCall-step-5.png?alt=media)
8. On it's `method` param add a subflow and drag a function `objectAttr`, on it's `object` param add a subflow and drag a function `resolveJSName`, on it's `name` param add the value `document.body`. Back on the function `objectAttr` on it's `attr` param add the value `appendChild`.

   ![](https://399701567-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwmJ1RKjM2uNFaL6fO3Xu%2Fuploads%2Fgit-blob-56b1e03211aec1bee81dfb49b506ea7573e478ce%2FmethodCall-step-6.png?alt=media)
9. On it's `arguments` param add a subflow and drag a function `toArray`, on it's `value1` param add a subflow and drag a function `getVar`, on it's `var` param add the value `div`.

   ![](https://399701567-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwmJ1RKjM2uNFaL6fO3Xu%2Fuploads%2Fgit-blob-1258c5c3312e09d10bb256873829b3f0b3684c07%2FmethodCall-step-7.png?alt=media)

### Result

1. Now click the button in preview, check the inspector, you will see a new div element being added on the body

   ![](https://399701567-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwmJ1RKjM2uNFaL6fO3Xu%2Fuploads%2Fgit-blob-5047b03eb5939fddc97c20e54479175f0cd80e25%2FmethodCall-result-1.png?alt=media)

## Links

### Related Information

See also:

* Functions
  * [resolveJSName](https://docs.emobiq.com/emobiq-client/006-actions-and-visual-logic/action-reference/cordova/app/resolvejsname)