# Advanced: $THIS

{% hint style="info" %}
This documentation is unfinished
{% endhint %}

Advanced features such as [getting parameters from the URL bar](https://docs.dapphero.io/features/what-are-nfts/advanced-url-query-params), or referencing the [current user](https://docs.dapphero.io/features/what-are-nfts/advanced-usdcurrent_user) are important to building dynamic functionality for Collectibles. To complete this functionality and give users the ability to dynamically generate links from Collectibles in a list to a page of a single collectible, we have created the ability for an HTML block to dynamic reference itself with the const `$THIS...`

### Usage

The `$THIS...` const is useful when it is necessary to refer to the current item, for example when creating dynamic links that should be unique for each collectible item. &#x20;

| CONST                   | Purpose                                   |
| ----------------------- | ----------------------------------------- |
| `$THIS_ContractAddress` | Substituted with current Contract Address |
| `$THIS_TokenID`         | Substituted with current TokenID          |
| `$THIS_OwnerAddress`    | Substitutes with current OwnerAddress     |

### Example

For a live Demo: [DappHero-nft-example](https://glitch.com/~dapphero-nft-example).

Suppose you wanted to build a webpage that showed a dynamic list of Collectibles based on the contract address of a particular NFT contract. This is fairly easy to do, [ list the Collectibles](https://docs.dapphero.io/features/listing-collectables#general-concepts). Now let's say you wrap each Token's image in an `anchor` tag, turning the image itself into a link that when clicked upon takes the user to a new webpage that shows a [Single Collectible](https://docs.dapphero.io/features/what-are-nfts/single-collectibles). Creating a Single Collectible is also fairly easy, but the question is- how would you pass the data about WHICH collectible you want to display on the Single Collectible page?&#x20;

This is where we use `$THIS...`

```markup
<div
      data-dh-feature="nft"
      data-dh-property-tag-id="000"
      data-dh-property-asset-contract-address="<<contractAddress>>">
     
   <div
      data-dh-property-tag-id="000"
      data-dh-property-asset-item="true">
      <a
         href="./singleNFT.html?assetTokenId=$THIS_TokenID&assetContractAddress=$THIS_ContractAddress">
         <img data-dh-property-asset-json-path="image_url"/>
         </a>
     </div></div>
```

Let us take a closer look at line 9-12. What we are doing here is creating a link to a new page but passing URL Query Params for the DappHero engine to catch in the `singleNFT.html` page. You could manually pass the details `assetTokenId=1234` but then you would be stuck always rendering this one token. Instead, because we are inside the `asset container` from line 6-9 which gets rendered for each Collectible returned, we can access THIS specific token. If we use $THIS\_TokenID in the `href` link, it will get replaced with the token currently displayed, for example '1234'. If we do the same for the `assetContractAddress` we can now link to the `singleNFT.html` page passing all the information required for that page to render dynamically the specific collectible token we are interested in.&#x20;

```markup
<a
href="./singleNFT.html?assetTokenId=$THIS_TokenID&assetContractAddress=$THIS_ContractAddress">
<img data-dh-property-asset-json-path="image_url"/>
</a>
```

### Forms

Using the `$THIS...` const is useful for more than just creating dynamic links- it can also be used to create dynamic forms. This means you can combine the Collectible feature with other features like smart contracts- allowing users to interact with smart contracts using the about the current token they are looking for. A great example for this would be to create a Collectible store front connected to a smart contract to let people buy or sell Collectibles directly from your website!

Have a look at this simple example.&#x20;

```markup
<form action="">
        TokenID: <input type="text" value="$THIS_TokenID"><br><br>
        Owner Address: <input type="text" value="$THIS_OwnerAddress"><br><br>
        <input type="submit" value="Submit">
</form> 
```
