# See if in preview or design mode in js **URL:** \ **Category:** Module Development\ **Tags:** perspective\ **Created:** [October 28, 2021, 11:02am UTC](https://forum.inductiveautomation.com/t/see-if-in-preview-or-design-mode-in-js/52442 "2021-10-28T11:02:26Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [October 28, 2021, 11:02am UTC](https://forum.inductiveautomation.com/t/see-if-in-preview-or-design-mode-in-js/52442/1 "2021-10-28T11:02:26Z")
In a custom module for perspective, is there a way to see if you are in preview or design mode? Its possible to see if we are in the designer or client, but is it also possible to see if we are in preview/design mode inside the designer? I’d like to turn off some bits of my javascript during design mode. Is that possible? ---
**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 1, 2021, 6:26pm UTC](https://forum.inductiveautomation.com/t/see-if-in-preview-or-design-mode-in-js/52442/2 "2021-11-01T18:26:34Z")
It looks like your frontend `ComponentDesignDelegate` should implement and return `designerComponent()`, and then we’ll automatically use a different component when you switch to/from design mode: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/1/010e1507138877905ea2b843a9131f56280fce90.png) ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [November 2, 2021, 7:41am UTC](https://forum.inductiveautomation.com/t/see-if-in-preview-or-design-mode-in-js/52442/3 "2021-11-02T07:41:37Z")
Thx this is probably what i need, ill check if it works when i got time ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [November 24, 2021, 11:26am UTC](https://forum.inductiveautomation.com/t/see-if-in-preview-or-design-mode-in-js/52442/4 "2021-11-24T11:26:12Z")
Finally got the time to look into this. Where to implement this? the ComponentMeta doesnt seem to be the right place xd My next guess is web/packages/designer/ … unfortunatly there seems to be no example from this xd > So i came up with something like this… `components.forEach((c: ComponentDesignDelegate) => InteractionRegistry.registerInteractionDelegates(c));` similar to the registry of componentMetas, but this doesnt seem to do anything ---
**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 24, 2021, 4:41pm UTC](https://forum.inductiveautomation.com/t/see-if-in-preview-or-design-mode-in-js/52442/5 "2021-11-24T16:41:22Z")
Hmm, that looks correct: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/3/931cbd446fae3b10d424cc9bdca3a1a59f7bcad9.png) ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [November 25, 2021, 7:31am UTC](https://forum.inductiveautomation.com/t/see-if-in-preview-or-design-mode-in-js/52442/6 "2021-11-25T07:31:25Z")
Hmm i wonder what im doing wrong then 😕 the ```auto ComponentMeta { getComponentType(){return TYPE} ``` matches the ```auto ComponentDesignDelegate { type = TYPE; ``` … Do they also have to be registered in the java designer/gatewayhook? If so how? ---
**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 29, 2021, 10:23pm UTC](https://forum.inductiveautomation.com/t/see-if-in-preview-or-design-mode-in-js/52442/7 "2021-11-29T22:23:53Z")
> [@victordcq](#): > > Do they also have to be registered in the java designer/gatewayhook? If so how? Ah, yeah, that might be it. `DesignerHook` for the Perspective module has `getDesignerComponentRegistry()`, which is essentially identical to the common `ComponentRegistry`; maybe try using that too. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [November 30, 2021, 7:49am UTC](https://forum.inductiveautomation.com/t/see-if-in-preview-or-design-mode-in-js/52442/8 "2021-11-30T07:49:03Z")
Something else came up so ill have to check later ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [December 3, 2021, 8:58am UTC](https://forum.inductiveautomation.com/t/see-if-in-preview-or-design-mode-in-js/52442/9 "2021-12-03T08:58:02Z")
Hmm those seem to be already registering, with the same decriptor as the component tho… Im able to put a designer delegate there just like the rad tagcounter, so it gotta be registered in java correct too… but im not getting the designer web component 😕 ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [November 15, 2024, 12:25pm UTC](https://forum.inductiveautomation.com/t/see-if-in-preview-or-design-mode-in-js/52442/10 "2024-11-15T12:25:26Z")
I am not sure victors original specific reason for identifying scope, but I ended up here trying to figure out how to disable specific event handlers in the design vs preview scopes. I figured I would throw this question here incase someone got here for the same reason. I had a button with an `onClick` event of `onActionPerformed`, and it was firing when clicking the button regardless of being in design or preview mode in the designer. I managed to fix it through the use of `this.props.eventsEnabled`, but I'd like to confirm is this the correct way to handle that? ```python export class Button extends Component, any> { onActionPerformed = () => { if (!this.props.eventsEnabled) { console.log("Button is disabled in the design-scope"); return; } this.props.componentEvents.fireComponentEvent("onActionPerformed", {}); } render() { const { props: { text, enabled }, emit } = this.props; return ( ); } } ``` ---
**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\ **Post date:** [November 15, 2024, 2:53pm UTC](https://forum.inductiveautomation.com/t/see-if-in-preview-or-design-mode-in-js/52442/11 "2024-11-15T14:53:48Z")
In the designer, all components get a CSS class of `designing` added to them when in design mode. I'd use CSS to set `pointer-events: none` when that class is applied.