# ID Property

The ID Property gives an ID to the block if you wish to give it a specific name in order to target it more easily (for example to connect it to a modal).

By default the Block ID is indexed relative to the number of blocks on the page.

* Open the Components Properties modal by clicking the "+" icon in the Block Inspector.
* Select the ID Property you wish to configure.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FZJPAUFsTyajAp8zlvAQJ%2FScreenshot%202023-09-30%20at%2010.35.16.png?alt=media&#x26;token=c15357bc-2e93-4d86-bf55-22d1eae0115d" alt=""><figcaption></figcaption></figure>

## Connect&#x20;

The ID Property needs to be connected for it to be applied to the canvas.&#x20;

{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}

* Select the Component to which you want to connect the ID Property.
* Select "Modify" in the toolbar or the Block Inspector.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fm0k43Vt7SuvUK5N0QZRq%2FScreenshot%202023-09-30%20at%2010.56.35.png?alt=media&#x26;token=d03f965b-118d-465c-8c7e-2121ff1614f9" alt=""><figcaption></figcaption></figure>

* The blocks contained in the component are now visible in the navigator.
* Find and select the block to which you wish to connect an ID Component Property.
* In the Components tab of the Primary tab, find ID.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FAYB41GCWXPwKFVbOx9pi%2FScreenshot%202023-09-30%20at%2010.58.06.png?alt=media&#x26;token=18734711-cb69-4000-9e3e-4c2b8f8bd418" alt=""><figcaption></figcaption></figure>

* Click the ID Content field to open the Component Properties modal.&#x20;
* Select the ID property you wish to connect.
* Click the Connect button.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FpR00Av7deBkgeMj4Du2I%2FScreenshot%202023-09-30%20at%2011.00.21.png?alt=media&#x26;token=363aca46-6915-4368-908f-03de8745a3ce" alt=""><figcaption></figcaption></figure>

The ID Property will be visible in green in the Block Inspector.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FVODfV4eIV9ytb5RUvqde%2FScreenshot%202023-09-30%20at%2011.03.13.png?alt=media&#x26;token=e8f85f7e-ee0c-4964-a320-5c26e550ddf5" alt=""><figcaption></figcaption></figure>

## Customise

To customise the ID Property, make sure that Customise is selected in the Tool Bar.

* Select required Component in the navigator.
* In the Block Inspector, input a suitable name in the ID field

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FSEPQYhj8SlKTekl6Xy89%2FScreenshot%202023-09-30%20at%2011.05.58.png?alt=media&#x26;token=5d765575-3984-45b0-bf2c-dba4cd7ef4d7" alt=""><figcaption></figcaption></figure>

## Name&#x20;

Allows you to label the selected ID property.

* Open the Component Properties modal.
* Select required ID property.
* Input suitable label to Name field.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FVqjn0JC3GmRBcABWnLPJ%2FScreenshot%202023-09-30%20at%2011.07.37.png?alt=media&#x26;token=ea688163-adba-4793-b217-f7192807a640" alt=""><figcaption></figcaption></figure>

## Placeholder&#x20;

Ensures that suitable alternative text appears in the ID field of the block inspector if the ID field has been cleared or is empty.

* Open the Components Properties.
* Select required ID property.
* Open Settings tab.
* Input suitable text to Placeholder field such as "Enter ID".

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fx1gzq06XwVueqMZjivey%2FScreenshot%202023-09-30%20at%2011.13.19.png?alt=media&#x26;token=68712b3b-568d-446d-82ca-f44805293690" alt=""><figcaption></figcaption></figure>

The Placeholder text will now appear in the ID field of the Block Inspector.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FUhpcl9opC52C0WR1Otns%2FScreenshot%202023-09-30%20at%2011.34.50.png?alt=media&#x26;token=069e3bd6-c8f9-4151-ae16-a61dac50d190" alt=""><figcaption></figcaption></figure>

## Auto Generate

The Auto Generate property, when enabled, will automatically choose a name for your ID.

* In the Components Properties modal, Toggle on/off Auto Generate as required.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fyltq0tPP6agUYOWOrzfC%2FScreenshot%202023-09-30%20at%2011.37.34.png?alt=media&#x26;token=712ae472-3379-4b55-b9bf-0846eb639807" alt=""><figcaption></figcaption></figure>

The Auto Generated ID will now be visible in the Block Inspector ID field.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FAukVn71XJInbnOaRsdrd%2FScreenshot%202023-09-30%20at%2011.38.36.png?alt=media&#x26;token=76c8a4a0-df56-43ca-bd02-54b8a3ccbd67" alt=""><figcaption></figcaption></figure>

If the Auto Generated ID is not acceptable, click the Reset button to the left of the ID label. This will Auto Generate a new ID.

* With the required component selected, n the Block Inspector, find the ID and click the Reset button to generate a new ID.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FGO7IXd76ZZn68REC4R2h%2FScreenshot%202023-09-30%20at%2011.39.14.png?alt=media&#x26;token=eacbd0d3-ca2b-4252-85a8-d4af84850a76" alt=""><figcaption></figcaption></figure>

## Simple Type

The Simple Type property allows you to input static data.

* Open the Components Properties.
* Select required ID property.
* Open Settings tab.
* Select Simple as Type.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FThKi3fAL2cNQfjSrOryJ%2FScreenshot%202023-09-30%20at%2011.43.06.png?alt=media\&token=8f5af9b1-bf0b-4fe0-a637-e457b8e49e65)

The simple (static) data will now look something like this.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FUg6AnUQQex3EGtxy7d4Y%2FScreenshot%202023-09-30%20at%2011.44.15.png?alt=media&#x26;token=34983466-8128-4275-a7b5-ea5d0a904f7f" alt=""><figcaption></figcaption></figure>

## Advanced Type

The Advanced Type property allows you to input dynamic or static data as required.

* Open the Components Properties modal.
* Select required ID property.
* Open Settings tab.
* Select Advanced as Type.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fp7v60ShGdDZosLymbitl%2FScreenshot%202023-09-30%20at%2012.08.36.png?alt=media\&token=0becb0f3-7a55-4f88-9a73-d9d71f8c0ff8)

* Make sure you are in Customise.
* In the Block Inspector, click the Dynamic icon next to ID label.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FMrwfqVHKe47sCsjo5vXG%2FScreenshot%202023-09-30%20at%2011.45.17%202.png?alt=media&#x26;token=1c74b328-69aa-46f9-8cf2-513729c6f015" alt=""><figcaption></figcaption></figure>

* This opens the Dynamic modal.
* Fill in the dynamic data fields.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FHy1LkQYlLBQsoDQGvssP%2FScreenshot%202023-09-30%20at%2011.46.13%202.png?alt=media&#x26;token=1f1c07a6-bc4c-4124-a9aa-7825d7883d7e" alt=""><figcaption></figcaption></figure>
