> For the complete documentation index, see [llms.txt](https://cranford-tech.gitbook.io/property-directory-template/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cranford-tech.gitbook.io/property-directory-template/reusable-elements/views-add-listing.md).

# Views-add-listing

### Overview

This is the section of the dashboard where real estate agents add new property listings. 

### Page components

The *views-add-listing* reusable element has a number of inputs/checkboxes(icons)/uploaders that allow the real estate agent to add details on the property listing they are creating.

### Functionality

Most of the functionality is relatively straightforward - the user inputs data into the various inputs and when the "create listing" button is clicked a workflow is triggered that creates a new property type.

However, there are two pieces of functionality that are a bit more complex:

#### Selecting a Category

The user has the option to choose categories for the property listing they are creating.

<figure><img src="/files/y0Vn59QQBZ9a6kow52SB" alt=""><figcaption><p>Selecting a category</p></figcaption></figure>

These choices are based on the *Categories* option set. You can change any of the categories, or add a new one, but editing the option set in the *Data* tab of your bubble editor.

<figure><img src="/files/GkTL7eugYndzen9PJJkG" alt=""><figcaption><p>Categories option set in bubble.io database</p></figcaption></figure>

When an unselected category is clicked on the *views-add-listing* reusable element, the below workflow is triggered (second one in the image).&#x20;

<figure><img src="/files/i0IFbJwQ8zdjIbaSarW1" alt=""><figcaption></figcaption></figure>

This workflow adds the category selected to a custom state on the reusable element (custom state name: *categories*). When a category is in the custom state *categories*, a conditional statement changes the associated icon from an empty circle, to one with a tick in it.

<figure><img src="/files/OEVLRpxBbWAQ4701pvQz" alt=""><figcaption><p>Conditional statement on icon circle for choosing categories</p></figcaption></figure>

Similarly, when a selected category is "unticked", the category is removed from the custom state and the icon changes back to an empty circle.

When the "Create Listing" button is clicked, a workflow adds the categories selected to the *Categories* field associated with that property listing.

#### Uploading Images

Each property listing has 3 images associated with it. The real estate agent can upload images by clicking on the "uploader" elements on the *views-create-listing* reusable element.

<figure><img src="/files/N6NCXoFtiIlA5cvPH1DN" alt=""><figcaption><p>3 uploader elements</p></figcaption></figure>

Once an image is uploaded, the below workflow is triggered:

<figure><img src="/files/J9xFANRSgpGK76owFaIa" alt=""><figcaption><p>When FileUploader Image1's value is changed</p></figcaption></figure>

It saves the uploaded image to a custom state on the parent group, hides the uploader and shows a group element that displays the image that has just been uploaded.

This workflow also shows a "close" icon, that is used to remove the image if the user wishes to upload an alternative one.