> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Blocks Code Snippets

## Article: Blocks Code Snippets

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/blocks-code-snippets.md

## Article Content:

# Blocks Code Snippets

<blockquote class="caution">

**Editor compatibility**

Wix Blocks apps aren't supported in the Wix Harmony editor. Existing Blocks apps remain available for purchase on the Wix App Market for Wix Editor and Wix Studio sites. To learn more, see [About Wix Harmony and Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/about-wix-harmony-and-blocks.md).

</blockquote>

Here are some useful short code snippets that you can use in any type of Blocks app. Copy, adapt the names to your app and make things work!

## Get Billing information 
Get [billing information](https://dev.wix.com/docs/sdk/backend-modules/app-management/app-instances/get-app-instance.md) for an app instance on a site. For example, the package name, information about the free trial, and more. 

Learn more [about pricing in Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/publish-blocks-apps-to-the-app-market/adjust-a-blocks-app-to-different-pricing-plans.md).

### Backend
Add this code to a `web.js` file: 

```ts
import { webMethod, Permissions } from "@wix/web-methods";
import { auth } from "@wix/essentials";
import { appInstances } from "@wix/app-management";

export const getInstance = webMethod(Permissions.Anyone, async () => {
    try {
        const elevatedGetAppInstance = auth.elevate(appInstances.getAppInstance);
        const response = await elevatedGetAppInstance();
        return response; 
        // Information about the billing is in the billing object of the GetAppInstanceResponse object. 
    } catch {
        console.log("error");
    }
})
```

### Frontend

Import the function in your fronted code: 

```ts
import { getInstance } from "backend/instance.web";

$w.onReady(async function () {
    try {
        const response = await getInstance();
        console.log("response: ", response);
    } catch (error) {
        console.log("Error getting instance:", error);
    }
});
```

<details>
<summary>See deprecated wix-application Velo example</summary> 

```ts
import wixApplication from 'wix-application'; 

//...
instance = await wixApplication.getDecodedAppInstance();
plan = instance.vendorProductId; //If there is no plan, the value is null.
//add your logic for the different plans
```
</details>

## Get widget properties in a panel
Use a custom panel to get the widget API properties. 

```ts
import { widget } from '@wix/editor';
// ...
const prop = await widget.getProp('<propName>');
// Load panel elements with current prop
$w('#<elementName>').value = prop;
```

<details>
<summary>See deprecated wix-widget Velo example</summary>

```ts
import wixWidget from 'wix-widget';
//...
const props = await wixWidget.getProps();
//load panel elements with current props
$w('#<elementName>').value = props.propName;
```
</details>

Learn more about connecting panel elements to properties:

- [Using code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/add-code-to-custom-panels-in-blocks.md#interact-with-widget-properties)
- [With no code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/connect-panel-elements-to-props.md)

## Set widget properties in a panel
Use a custom panel to set the widget API properties.

```ts
import { widget } from '@wix/editor';

await widget.setProp('<propName>', '<propValue>');
```

<details>
<summary>See deprecated wix-widget Velo example</summary>

```ts
import wixWidget from 'wix-widget';

await wixWidget.setProps({ <propName>: <propValue> });
```
</details>

Learn more about connecting panel elements to properties:

- [Using code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/add-code-to-custom-panels-in-blocks.md#interact-with-widget-properties)
- [With no code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/connect-panel-elements-to-props.md)

## Open a dashboard page from a panel 

Create a link in a custom panel that opens the app dashboard page.

**Backend:**
```ts
import { auth } from "@wix/essentials";
import { appInstances } from "@wix/app-management";

export async function getInstance() {
  try {
    const { instanceId } = await auth.getTokenInfo();
    const elevatedGetAppInstance = auth.elevate(appInstances.getAppInstance);
    const response = await elevatedGetAppInstance();
    return response;
  } catch {
    return new Response({ error: "Failed to process request" }, { status: 500 });
  }
}
```

**Frontend:**
```ts
import { getInstance } from "backend/instance";
import wixEditor from 'wix-editor';

$w.onReady(function () {
  getInstance()
    .then((appInstance) => {
      $w('#<buttonID>').onClick(() => {
        wixEditor.openDashboardPanel({ url: `app/${appInstance.appDefId}` });
      });
    })
    .catch((error) => {
      console.log(error);
    });
});
```

<details>
<summary>See deprecated wix-application and wix-editor Velo example</summary>

```ts
import wixApplication from 'wix-application';
import wixEditor from 'wix-editor';
//...
const appInstance = await wixApplication.getDecodedAppInstance();
$w('#<buttonID>').onClick(() => {
  wixEditor.openDashboardPanel({ url: `app/${appInstance.appDefId}` });
});
```
</details>

Learn more about opening a dashboard page from a panel:
- [Using code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/dashboard-pages/open-a-blocks-dashboard-page-from-a-custom-panel.md)
- [With no code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/panel-button-rules-to-open-pages.md)

## Create an upgrade link in a panel
Create a link in a custom panel that opens the app's plan picker.

**Backend:**
```ts
import { auth } from "@wix/essentials";
import { appInstances } from "@wix/app-management";

export async function getInstance() {
  try {
    const { instanceId } = await auth.getTokenInfo();
    const elevatedGetAppInstance = auth.elevate(appInstances.getAppInstance);
    const response = await elevatedGetAppInstance();
    return response;
  } catch {
    return new Response({ error: "Failed to process request" }, { status: 500 });
  }
}
```

**Frontend:**
```ts
import { getInstance } from "backend/instance";

$w.onReady(function () {
  getInstance()
    .then((appInstance) => {
      const upgradeURL = `https://www.wix.com/apps/upgrade/${appInstance.appDefId}?appInstanceId=${appInstance.instanceId}`;
      $w('#<panelRightTextComponentID>').link = upgradeURL;
    })
    .catch((error) => {
      console.log(error);
    });
});
```

<details>
<summary>See deprecated wix-application Velo example</summary>

```ts
import wixApplication from 'wix-application';
//...
const appInstance = await wixApplication.getDecodedAppInstance();
const upgradeURL = `https://www.wix.com/apps/upgrade/${appInstance.appDefId}?appInstanceId=${appInstance.instanceId}`;
$w('#<panelRighTextComponentID>').link = upgradeURL; 
```
</details>

Learn more about:
- Providing [entry points to upgrade](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/publish-blocks-apps-to-the-app-market/provide-entry-points-to-upgrade-your-app.md) your app
- Creating an upgrade button [with no code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/panel-button-rules-to-open-pages.md)

## Access inner-widget properties from a panel
Get and set properties of a nested widget from a panel in the outer widget. [Learn more](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/add-code-to-custom-panels-in-blocks.md)

```ts
import { widget } from '@wix/editor';
// ...
const innerWidget = await widget.getNestedWidget('#<nestedWidgetName>');
const innerProp = await innerWidget.getProp('<innerPropName>');
await innerWidget.setProp('<innerPropName>', '<propValue>');
```

<details>
<summary>See deprecated wix-widget Velo example</summary>

```ts
    const innerWidget = await wixWidget.getNestedWidget("#<nestedWidgetName>");
    const innerProps = await innerWidget.getProps();
    await innerWidget.setProps({ <innerPropName>: "<props value>" });
```
</details>

## Expand and collapse panel elements

Expand and collapse elements in a custom panel. [Learn more](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/add-code-to-custom-panels-in-blocks.md)

```ts
$w('#panelToggleSwitchID').onChange((event) => {
  if (event.target.checked) {
    $w('#panelElementID').expand();
  } else {
    $w('#panelElementID').collapse();
  }
});
```

## Query data from a CMS database collection

Use the SDK's data module to query collections in your app.

```ts
import { dataItems } from '@wix/data';
// ...
const results = await dataItems.query('<yourAppNamespace>/<yourCollectionName>').find();
// Use the "results" object as needed
```

<details>
<summary>See deprecated wix-data Velo example</summary>

```ts
import wixData from "wix-data";
//...
wixData
  .query("<yourAppNamespace>/<yourCollectionName>")
  .find()
  .then((results) => {
    //your code using the "results";
  });
```
</details>

Learn more about managing collections in Blocks: 
- [Using code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/cms-collections-in-blocks/about-cms-collections-in-blocks.md)
- [With no code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/cms-collections-in-blocks/connect-elements-to-collection-fields-with-no-code.md)