# Options Grid/List View on Component View Meeting web SDK

**URL:** <https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745>\
**Category:** Web\
**Created:** [December 26, 2022, 1:38am UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745 "2022-12-26T01:38:54Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanthinhit](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tuanthinhit/32/44109_2.png) [@tuanthinhit](https://devforum.zoom.us/u/tuanthinhit)\
**Post date:** [December 26, 2022, 1:38am UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/1 "2022-12-26T01:38:54Z")

</div>

I can’t see button showing Grid view/List view on dev site while local is still visible.  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/7/a/7ab81bdaf194439eb39977366b43e67b62b92a58.png)  
On Local:  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/0/6/06910b530afbf252f79c894f3612e760d1ce5850.png)  
Thank you.

---

<div class="post-metadata">

**Author:** ![freelancer.nak](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/freelancer.nak/32/40968_2.png) [@freelancer.nak](https://devforum.zoom.us/u/freelancer.nak)\
**Post date:** [December 26, 2022, 7:45am UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/2 "2022-12-26T07:45:42Z")

</div>

Here are the solutions

- [Cross Origin Isolation - Quick Fix](https://youtu.be/2FlInnoYOkY)
- [Gallery View Fix](https://youtu.be/mXEx2mn9wro)

---

<div class="post-metadata">

**Author:** ![tuanthinhit](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tuanthinhit/32/44109_2.png) [@tuanthinhit](https://devforum.zoom.us/u/tuanthinhit)\
**Post date:** [January 12, 2023, 1:24am UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/3 "2023-01-12T01:24:44Z")

</div>

Hi @freelancer.nak

- Thank you for your reply.
- Btw, i read the document. Password is optional but i can not empty. Can you help me?
- And how can I let the room participants talk to each other when the host has not joined the room?  
Thank you in advance.

Best regards,  
John

---

<div class="post-metadata">

**Author:** ![freelancer.nak](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/freelancer.nak/32/40968_2.png) [@freelancer.nak](https://devforum.zoom.us/u/freelancer.nak)\
**Post date:** [January 12, 2023, 8:00am UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/4 "2023-01-12T08:00:28Z")

</div>

@tuanthinhit You are 👇 mentining regarding WebSDK?

> [@tuanthinhit](#):
>
> Btw, i read the document. Password is optional but i can not empty.

---

<div class="post-metadata">

**Author:** ![tuanthinhit](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tuanthinhit/32/44109_2.png) [@tuanthinhit](https://devforum.zoom.us/u/tuanthinhit)\
**Post date:** [January 12, 2023, 8:59am UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/5 "2023-01-12T08:59:35Z")

</div>

Dear @freelancer.nak ,

Yep. I want to ask about Password and participants join room without need host approve/admit.

Best regards,  
John

---

<div class="post-metadata">

**Author:** ![freelancer.nak](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/freelancer.nak/32/40968_2.png) [@freelancer.nak](https://devforum.zoom.us/u/freelancer.nak)\
**Post date:** [January 12, 2023, 9:49am UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/6 "2023-01-12T09:49:40Z")

</div>

@tuanthinhit

Here is → [How to Create password less Zoom Meeting -(REST API)](https://youtu.be/T6DGDgwetr8)

---

<div class="post-metadata">

**Author:** ![tuanthinhit](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tuanthinhit/32/44109_2.png) [@tuanthinhit](https://devforum.zoom.us/u/tuanthinhit)\
**Post date:** [January 12, 2023, 5:22pm UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/7 "2023-01-12T17:22:32Z")

</div>

Dear @freelancer.nak

Thank you for your reply.  
I watched your video but I didn’t find the answer I needed. I want to ask how to set the password empty. And can room participants talk to each other even if the host has not joined the room?

Best regards,  
John

---

<div class="post-metadata">

**Author:** ![freelancer.nak](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/freelancer.nak/32/40968_2.png) [@freelancer.nak](https://devforum.zoom.us/u/freelancer.nak)\
**Post date:** [January 12, 2023, 5:30pm UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/8 "2023-01-12T17:30:05Z")

</div>

@tuanthinhit Please watch carefully 👇

> [@freelancer.nak](#):
>
> Here is → [How to Create password less Zoom Meeting -(REST API)](https://youtu.be/T6DGDgwetr8)

👆 I mentioned how to create the passwordless meeting. When you are going to disable the password then you must need to enable the anyone option 👇 neither Zoom will auto-enable anyone from the bottom options as per your settings.

→ `meeting_authentication`  
 → `waiting_room`

> [@tuanthinhit](#):
>
> And can room participants talk to each other even if the host has not joined the room

👆 For this, you need to enable join\_before\_host settings either from `https://zoom.us/profile/setting` and type` join before` in the setting search bar and enable that or inside the meeting payload if you are creating a meeting using REST API.

---

<div class="post-metadata">

**Author:** ![tuanthinhit](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tuanthinhit/32/44109_2.png) [@tuanthinhit](https://devforum.zoom.us/u/tuanthinhit)\
**Post date:** [January 12, 2023, 5:47pm UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/9 "2023-01-12T17:47:37Z")

</div>

Dear @freelancer.nak

- About can room participants talk to each other even if the host has not joined the room  
=\>Sure. I have enabled the function that participants can join at any time. But when the participant joins the room. They still need the room owner’s approval to enter the room. So everyone in the room can’t talk to each other.  
Best regards,  
John

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/2/e/2ea85c1a2c6ab5309450d8ea2343835b0339f7c9.png)

---

<div class="post-metadata">

**Author:** ![freelancer.nak](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/freelancer.nak/32/40968_2.png) [@freelancer.nak](https://devforum.zoom.us/u/freelancer.nak)\
**Post date:** [January 12, 2023, 5:59pm UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/10 "2023-01-12T17:59:41Z")

</div>

@tuanthinhit

> [@tuanthinhit](#):
>
> - About can room participants talk to each other even if the host has not joined the room  
> =\>Sure. I have enabled the function that participants can join at any time. But when the participant joins the room. They still need the room owner’s approval to enter the room. So everyone in the room can’t talk to each other.  
> Best regards,  
> John
> 
> ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/2/e/2ea85c1a2c6ab5309450d8ea2343835b0339f7c9.png)

👆 You need to create a meeting with the below settings

→ Meeting with Auto Generate Password  
 → Disable Waiting Room  
 → Enable Join Before Host

And Share the join link with your participants they will join and talk without a host.

Hope that works. if not please reply. Thanks

---

<div class="post-metadata">

**Author:** ![tuanthinhit](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tuanthinhit/32/44109_2.png) [@tuanthinhit](https://devforum.zoom.us/u/tuanthinhit)\
**Post date:** [January 13, 2023, 2:53am UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/11 "2023-01-13T02:53:09Z")

</div>

Dear @freelancer.nak

- Yep. Thank you. I can config it now.
- But about password/passcode. I does not found setting “enable the anyone option”. Can you please re-check help me?
- And as your video demo. Password/passcode will auto generate even though we still set the password in zoom settings?  
Best regards,  
John

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/2/7/27c4cf8bd9a04fd517c459e3f70d4096b5883802.png)

---

<div class="post-metadata">

**Author:** ![tuanthinhit](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tuanthinhit/32/44109_2.png) [@tuanthinhit](https://devforum.zoom.us/u/tuanthinhit)\
**Post date:** [January 13, 2023, 6:47am UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/12 "2023-01-13T06:47:07Z")

</div>

Dear @freelancer.nak

- I also don’t want the user to have to enter the name, I tried leaving the name field empty but I get the error “errorCode: 4003”. So can you confirm for me that the name field can be left blank?  
Thank you in advance.

Best regards,  
John

---

<div class="post-metadata">

**Author:** ![freelancer.nak](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/freelancer.nak/32/40968_2.png) [@freelancer.nak](https://devforum.zoom.us/u/freelancer.nak)\
**Post date:** [January 13, 2023, 6:53am UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/13 "2023-01-13T06:53:02Z")

</div>

> [@freelancer.nak](#):
>
> Here is → [How to Create password less Zoom Meeting -(REST API)](https://youtu.be/T6DGDgwetr8)

👆 I have already described all the things here regarding meeting join security options. Which you will enable or disable concurrently.

---

<div class="post-metadata">

**Author:** ![tuanthinhit](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tuanthinhit/32/44109_2.png) [@tuanthinhit](https://devforum.zoom.us/u/tuanthinhit)\
**Post date:** [January 13, 2023, 8:18am UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/14 "2023-01-13T08:18:21Z")

</div>

Dear @freelancer.nak

- Thank you for your reply.
- What about the username removal issue?

Best regards,  
John

---

<div class="post-metadata">

**Author:** ![freelancer.nak](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/freelancer.nak/32/40968_2.png) [@freelancer.nak](https://devforum.zoom.us/u/freelancer.nak)\
**Post date:** [January 13, 2023, 8:51am UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/15 "2023-01-13T08:51:20Z")

</div>

> [@tuanthinhit](#):
>
> I also don’t want the user to have to enter the name, I tried leaving the name field empty but I get the error “errorCode: 4003”. So can you confirm for me that the name field can be left blank?  
> Thank you in advance.

👆 userName is required while joining. You can automate that by passing userName from the query string or from your API endpoint. Thanks

---

<div class="post-metadata">

**Author:** ![tuanthinhit](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tuanthinhit/32/44109_2.png) [@tuanthinhit](https://devforum.zoom.us/u/tuanthinhit)\
**Post date:** [February 3, 2023, 9:57am UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/16 "2023-02-03T09:57:14Z")

</div>

@freelancer.nak

Thank you for your help.

- I have a question. How can i set Speaker view as default on Component View? I have set viewLayout: ‘gallery’ but it does not success

Best regards,  
John.

---

<div class="post-metadata">

**Author:** ![freelancer.nak](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/freelancer.nak/32/40968_2.png) [@freelancer.nak](https://devforum.zoom.us/u/freelancer.nak)\
**Post date:** [February 3, 2023, 12:10pm UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/17 "2023-02-03T12:10:44Z")

</div>

@tuanthinhit Hi,

There is no API to switch Layouts but here is my trick

```auto
 client.on('connection-change', (e) => {
                    if (e.state == 'Connected') {
                        return new Promise((resolve, reject) => {
                            let ribbon = document.querySelector('button[title="Ribbon"]');

                            if (ribbon) {
                                ribbon.click();
                                console.log('-- switching to speak view --');

                                return resolve(true);
                            }

                            return reject(true);
                        }).then((r) => {
                            var xpath = "//span[text()='Active']";
                            var speakView = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);

                            if (speakView && speakView.singleNodeValue) {
                                speakView.singleNodeValue.click();
                            }
                        }).catch((error) => {
                            console.log('--- error when switching to speak view --> ', error);
                        });
                    }
                });

```

If any query still please ask. Thanks

---

<div class="post-metadata">

**Author:** ![tuanthinhit](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tuanthinhit/32/44109_2.png) [@tuanthinhit](https://devforum.zoom.us/u/tuanthinhit)\
**Post date:** [February 4, 2023, 5:13pm UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/18 "2023-02-04T17:13:37Z")

</div>

@freelancer.nak

- Thank you so much. It’s working now.
- But can you please help me show video of the participants? I can not show it on the Component Speaker View. As you can see Speaker view UI like this screenshot below:  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/a/5/a5cb3494513089098b08b5d4529e73d6f169698b.png)  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/3/4/34e28851590c7e4c9a49d1d5695a4a16d57ace92.jpeg)

---

<div class="post-metadata">

**Author:** ![freelancer.nak](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/freelancer.nak/32/40968_2.png) [@freelancer.nak](https://devforum.zoom.us/u/freelancer.nak)\
**Post date:** [February 4, 2023, 6:59pm UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/19 "2023-02-04T18:59:20Z")

</div>

@tuanthinhit

Here are the sessions regarding WebSDK Integrations

- [Zoom Meeting SDK Integration with VueJS](https://youtu.be/CMpe56VoTTo)
- [Zoom Meeting SDK Integration with ReactJS](https://youtu.be/4BgkLvH7T0Y)
- [Zoom Meeting SDK Integration with AngularJS](https://youtu.be/utXjISjjHOY)
- [NextJS - Zoom WebSDK Component View](https://youtu.be/mwta4hZOtpc) ← Here described Component View Videos Rendering Sizes
- [Zoom Meeting SDK Client View Integration](https://youtu.be/zaIhI_BZKJo)

---

<div class="post-metadata">

**Author:** ![freelancer.nak](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/freelancer.nak/32/40968_2.png) [@freelancer.nak](https://devforum.zoom.us/u/freelancer.nak)\
**Post date:** [February 6, 2023, 9:37am UTC](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745/20 "2023-02-06T09:37:57Z")

</div>

@tuanthinhit Also you must have enabled sharedArrayBuffer API 👇

→ [Cross Origin Isolation Quick Fix](https://youtu.be/2FlInnoYOkY)

[Next page](https://devforum.zoom.us/t/options-grid-list-view-on-component-view-meeting-web-sdk/80745.md?page=2)