# References

Properties of the Self section from the Properties panel have additional configurations that can be used to fully customize the component. 

When can use [parametrization](https://help.pickzen.com/design-system/properties-values/parametrization) with also the possibility of using contextual parameters:

![](https://1947171238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTaL6FQB3RzlkCwQfN%2Fuploads%2FoWGHZhDgklPLNTElWHT0%2Fimage.png?alt=media\&token=a5edd70f-b2a2-430a-a7a8-ade997ec0e02)

Also, we can use references to gain more control. Properties that accept references have a *bull's-eye* icon on the right:

![](https://1947171238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTaL6FQB3RzlkCwQfN%2Fuploads%2FdnmRJg25nSZbn4buVaPh%2Fimage.png?alt=media\&token=40985923-40ca-4956-a810-67c82dec30e1)

When the target icon is clicked, a dialog will appear:

![](https://1947171238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTaL6FQB3RzlkCwQfN%2Fuploads%2FngHcynHtKZWLEqy3irRg%2Fimage.png?alt=media\&token=41a919f9-2fe2-4def-aafc-0a9b983dc79d)

By default, the field type is *General*. To use a reference change the type:

![](https://1947171238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTaL6FQB3RzlkCwQfN%2Fuploads%2F3F8LweMoShJUuEWo5XGz%2Fimage.png?alt=media\&token=236fc65c-3196-4a52-9edf-b6aacd8dfbca)

A reference is composed of three parts:

* **Target**: Defines a component where some action is going to be executed.
* **Action**: Defines the action to execute.
* **Parameters**: Defines the parameters of the action.

### Target

Defines a component where some action is going to be executed. It can be the current component of any parent component of the hierarchy. A component is referenced using its private Id. 

For example, let's see the NavBar component defined in the Deck component:

![](https://1947171238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTaL6FQB3RzlkCwQfN%2Fuploads%2FG98FNs20Jf40nlbse5un%2Fimage.png?alt=media\&token=18368ccb-af69-4810-a081-70c3565a2df3)

It has the Visible property defined by reference:

 

![](https://1947171238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTaL6FQB3RzlkCwQfN%2Fuploads%2FMrsOm6gUITnivYVCE530%2Fimage.png?alt=media\&token=b1c46152-5db6-4814-a1ff-ed7eb032b1dd)

The actual value of the visible property is obtained by calling the *inState* action in the *deck* component and passing the *slides* parameter. The private Id of the Deck component has been defined accordingly:

![](https://1947171238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTaL6FQB3RzlkCwQfN%2Fuploads%2F0kPNNftSFE1ROh05ZDto%2Fimage.png?alt=media\&token=4696607c-247d-46b5-9d4a-dc82e60890f1)

The Deck component implements the inState action that receives a parameter. When the parameter is *slides*, it will return true if the pickzen is in the *slides* state (started and not completed). So, the result will be that the Navbar component will be only visible if the pickzen is in the *slides* state. 

Internally all references are converted to expressions. For example, the above reference would be:

**deck.inState(slides)**

Special parameters, starting with $, can be used in the references, for example, the *$index* parameter:

![](https://1947171238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTaL6FQB3RzlkCwQfN%2Fuploads%2Fg3Ld8jg7y2V30WSvsVR1%2Fimage.png?alt=media\&token=73d0a0ff-194b-4258-9ddc-f9cfd337a67f)

In this example, we have selected the *SelectableText* component which is any of the answers. It is contained in a *Repeater* that will iterate over a list of items and will render a *SelectableText* component for each of them. Once rendered, we need to know which one has been selected, to change its state for example, and highlight it. For that, we have defined a custom property named *Selected* that is defined as a reference:

![](https://1947171238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTaL6FQB3RzlkCwQfN%2Fuploads%2FpRR0EkIP1IfchChDN1ah%2Fimage.png?alt=media\&token=adc8347d-1019-4368-ab82-2bafaf03da0c)

In this case, the *Selected* property will be true if the *isSelectedOption* action of the slide component returns true. We can see the parameter is $index, and it will be resolved in this case, as the index of the iterating item. The *Repeater* component will inject a number for each *$index* parameter of its *SelectableText* children:

![](https://1947171238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTaL6FQB3RzlkCwQfN%2Fuploads%2FqG1Ar1x3GWoTAH6qTbUq%2Fimage.png?alt=media\&token=6322aaa7-b90d-43c6-9874-3e3a52c1cdd2)

This way, each *isSelectedOption* will be called with a number, 0 to N, depending on the number of answers (iterated items). Also in this example, the slide target is the private Id of the QuestionSlide:

![](https://1947171238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTaL6FQB3RzlkCwQfN%2Fuploads%2FrkaX6e51JI8ivwlBwyMb%2Fimage.png?alt=media\&token=d09fc880-59b5-4bd0-aba0-30b93b175bb7)

The component QuestionSlide defines the action *isSelectedOption* that is used to know if a pickzen answer has been selected by the user.

When a property is configured by reference, an arrow will appear at the left of the field:

![](https://1947171238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTaL6FQB3RzlkCwQfN%2Fuploads%2FalNevxUhPF2SfngKTBVc%2Fimage.png?alt=media\&token=b6f5df0f-356c-4013-8c45-bddb297ad335)

### Values resolution

The first step to resolve a reference is to check if it is a contextual value. For that, the slide *params* and *properties* objects are checked. If the resolves to null, next steps are evaluated.

Next, expression parameters are taken out. For example, in the expression *slide.isSelectedOption(3)* the unique parameter *3* is taken out being evaluated subsequently the expression *slide.isSelectedOption.*

If a parameter starts with a $ symbol, it will be resolved as an independent expression. For example, in the *slide.isSelectedOption($index)* expression, the parameter *$index* will be resolved as a independent expression *index*.

Once parameters are taken out, the remaining expression is split by the point symbol. For example the *container.dropdown.items.isSelected* expression will be resolved as executing the *isSelected* action in the items object inside the *dropdown* object inside the *container* object.

Each part of the expression will be fetched from the context where the hiearchy of the current component belongs to. For example, if a child component property is being resolved in the context will appear the parent object and the child one with their Private Ids as keys.

Each part of an expression can be objects itself or actions. For example in the expression *container.getChildren.delete(3)*, the second part of the expression is an action that will be executed to get the children objects.

In the case of getters, the get prefix can be removed so the expressions *container.getChildren.delete(3) and container.children.delete(3)* are identical.

#### Special methods

* **exists**: Returns true if the expression once resolved exists
* **hasContent**: Returns true if the expression once resolved has content. In case of HTML, all tags are removed to evaluate, so expressions like \<div class=my-class">\</div> will return false.
* **setting**: Returns a global theme using the expression once resolved as key.

#### NOT

A boolean property can be checked inversely prepending the ! symbol to the expression. For example:

![](https://1947171238-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LrTaL6FQB3RzlkCwQfN%2Fuploads%2Ft8kdqHPGGlYx7bDt8Z6K%2Fimage.png?alt=media\&token=5faf5779-d8a2-418f-98e3-631bae9fe100)

In this example, the component would be visible if the item has not stock.