# View as Property in Perspective Component

**URL:** <https://forum.inductiveautomation.com/t/view-as-property-in-perspective-component/66860>\
**Category:** Module Development\
**Tags:** perspective\
**Created:** [November 23, 2022, 4:23pm UTC](https://forum.inductiveautomation.com/t/view-as-property-in-perspective-component/66860 "2022-11-23T16:23:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![cody.tamaki](https://avatars.discourse-cdn.com/v4/letter/c/b487fb/32.png) [@cody.tamaki](https://forum.inductiveautomation.com/u/cody.tamaki)\
**Post date:** [November 23, 2022, 4:23pm UTC](https://forum.inductiveautomation.com/t/view-as-property-in-perspective-component/66860/1 "2022-11-23T16:23:52Z")

</div>

Hello,

I'm working on a perspective component, and I'd like to be able to use a property with a path to a perspective view so that users can dynamically override the default view. How would I go about doing this in the REACT component, and the properties.json file in the common scope so that I get the view-picker?

Basically, I'm looking to implement something similar to your popups property on the map component.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/c/5c726b079f77ce05f45711166a146cb71b2d2932.png)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [November 23, 2022, 4:34pm UTC](https://forum.inductiveautomation.com/t/view-as-property-in-perspective-component/66860/2 "2022-11-23T16:34:25Z")

</div>

For the JSON editor support, you just need to specify a `format` of `view-path` in your schema:

```auto
            "path": {
              "type": "string",
              "format": "view-path",
              "description": "Path to the view that will be used as the display for the control.",
              "default": ""
            },

```

At the JSX/React level, you embed a `<View>` from `@inductiveautomation/perspective-client`... which I'm not sure if you have access to? I don't know off the top of my head the publishing situation for our TS libs.  
But, in theory:

```auto
                containerContent = (
                    <div>
                        <View
                            key={PageStore.instanceKeyFor(view.path, mountPath)}
                            store={this.props.store.view.page.parent}
                            mountPath={mountPath}
                            resourcePath={view.path}
                            outputListener={onViewOutputChanged}
                            params={view.params}
                            useDefaultWidth={true}
                            useDefaultHeight={true}
                        />
                        <ReactResizeDetector
                            handleHeight={true}
                            handleWidth={true}
                            onResize={this.updateViewContainerDimensions(ref)}
                        />
                    </div>
                );

```

---

<div class="post-metadata">

**Author:** ![Benjamin\_Furlani](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/benjamin_furlani/32/66084_2.png) [@Benjamin\_Furlani](https://forum.inductiveautomation.com/u/Benjamin_Furlani)\
**Post date:** [August 19, 2024, 12:50pm UTC](https://forum.inductiveautomation.com/t/view-as-property-in-perspective-component/66860/4 "2024-08-19T12:50:04Z")

</div>

I know this was solved, but I am wondering where does mountPath come from? From the way I understand view.path would be like "Components/MyValve" or path-to-whatever-component. Trying to accomplish something similar but want to make sure I can leverage this example properly.

Sorry to revive old bones!