> 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.

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.

Categories option set in bubble.io database

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

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.

Conditional statement on icon circle for choosing categories

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.

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

When FileUploader Image1's value is changed

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.