On this page

Show all

Help Center/ Meeting/ Client SDK Reference/ Electron SDK/ Remarks/ JSON Description for UI Configuration

JSON Description for UI Configuration

Updated on 2024-12-27 GMT+08:00

View PDF

Some in-meeting UI elements are customized through the config API. UI elements that can be customized are as follows:

Meeting window name (only for the Windows platform).

After a meeting starts, a meeting icon is generated on the task bar of the Windows. When you point to the icon, a thumbnail window is displayed. You can customize the name of the window.

Figure 1 Meeting window name

Meeting details copied after the copy button is clicked on the meeting details screen

The default domain name prefix of the meeting link (for example, https://bmeeting.huaweicloud.com/#/j/982989574) is https://bmeeting.huaweicloud.com/. If the portal for joining a meeting is developed by you, customize the meeting details copied after a user clicks the copy button on the meeting details screen.

Figure 2 Meeting details

Meeting control buttons

Delete or modify meeting control buttons provided by the SDK. For details about buttons that can be deleted and modified, see Table 10.
Add custom buttons. For details, see Customizing Meeting Control Buttons.

Figure 3 Bottom toolbar and More menu

Figure 4 Sharing toolbar and More menu

Figure 5 Status toolbar

Parameter description of the config API

**Table 1** Parameter description
Parameter	Mandatory	Type	Description
uiConfig	Yes	string	JSON object character string "{"frame":object}". The object has format requirements. If the format does not meet the requirements, the configuration does not take effect. For detailed rules, see Table 2, 3, 4, and 5.

**Table 2** frame object description
Key	Type	Description
name	string	Meeting window name, for example, MyApp shown in Figure 1.
confMenu	object	Button objects in the meeting window, as shown in Figure 3 and Figure 4.

**Table 3** confMenu object description
Key	Type	Description
toolBar	object	Button objects in the meeting window, as shown in Figure 3 and Figure 4.
titleBar	object	Configuration object of the title bar in the meeting window, for example, the meeting details shown in Figure 2.
statusBar	object	Configuration object of the status bar in the upper left corner of the meeting window, as shown in Figure 5.

**Table 4** toolBar object description
Key	Type	Description
button	object[]	Button objects in the meeting window, for example, buttons and menus shown in Figure 3 and Figure 4.
customButton	object[]	Configuration object of the third-party custom buttons in the meeting window, for example, 2 and 3 shown in Figure 3 and 1 and 2 shown in Figure 4.

**Table 5** statusBar object description
key	Type	Description
button	object[]	Button configuration object of the status bar in the upper left corner of the meeting window, as shown in Figure 5.

**Table 6** titleBar Object Description
Key	Type	Description
confDetail	object[]	for example, the meeting details shown in Figure 2.

**Table 7** confDetail object description
Key	Type	Description
button	object[]	Button objects in the meeting details window.

**Table 8** Description of the button object in the toolBar and confDetail objects
Key	Type	Description
buttonId	string	Unique ID of a button. For details about the mapping between buttonId and buttons, see Table 10.
showAsAction	string	Whether to display the button. The value can be never (not displayed) or ifRoom (displayed).
isCustomizedClick	bool	Whether to inject content if the button is clicked. true: yes. When a user clicks the button, a notification is sent, and the SDK does not process the click response.

**Table 9** customButton object description
Key	Type	Description
buttonId	string	Custom button ID, for example, customMenu.
title	string	Custom button name, for example, Custom button.
buttonImg	string	Icon path of the custom button. Use an absolute path. For example, to/path/image.svg. SVG and PNG formats are supported. UTF-8 encoding is required.
buttonPos	int	Position of the custom button. 0: More menu on the toolbar; 1: bottom toolbar; 2: sharing toolbar.

**Table 10** Introduction to buttonId
Button Name	Button ID	Description
Microphone	"microphone"	Can be hidden.
Speaker	"speaker"	Can be hidden.
Camera	"camera"	Can be hidden.
Invite	"invite"	Can be hidden and injected.
Leave	"leave"	Can be hidden and injected.
Share	"share"	Can be hidden and injected.
Participants	"attendee"	Can be hidden and injected.
Feedback	"feedback"	Can be hidden and injected.
Annotation	"annotation"	Can be hidden (valid only for the Windows platform).
Give control	"remote_control"	Can be hidden (valid only for the Windows platform).
Stop sharing	"stop_share"	Can be hidden.
Chat	"chat"	Can be hidden and injected.
Live captions (enabling live captions and caption translation)	"subtitle"	Can be hidden.
Security	"security"	Can be hidden.
Network detection	"network_detection"	Can be hidden.
Allow unmute	"allow_unmute"	Can be hidden (valid only for the Windows platform).
Dual screen	"dual_screen"	Can be hidden (valid only for the Windows platform).
Recording	"record"	Can be hidden.
Copy meeting info	"copy_conf_info"	Can be injected.
Participant details	"participant_detail"	Can be injected. (The macOS SDK does not require injection.)
Copy attendee link	"copy_audience_conf_info"	Can be injected.

According to the preceding definition, the complete configuration items in JSON format of the customizable UI elements are as follows:

{
  "frame": {
    "name": "demo",
    "confMenu": {
      "titleBar": {
        "confDetail": {
          "button": [
            {
              "buttonId": "copy_conf_info",
              "isCustomizedClick": true
            }
          ]
        }
      },
      "statusBar": {
          "button": [
              {
                 "buttonId": "record",
                 "showAsAction": "never"
               }
           ]
       },
      "toolBar": {
        "customButton": [
          {
            "buttonId": "customMenu",
            "title": "Custom button"
            "buttonPos": 1,
            "buttonImg": "imagePath",
            "subMenu": ""
          },
          {
            "buttonId": "customMore",
            "title" " Custom more",
            "buttonPos": 0,
            "buttonImg": "imagePath"
          },
          {
            "buttonId": "customShare",
            "title": " Custom sharing",
            "buttonPos": 2,
            "buttonImg": "imagePath"
          }
        ],
        "button": [
          {
            "buttonId": "microphone",
            "showAsAction": "never"
          },
          {
            "buttonId": "speaker",
            "showAsAction": "never"
          },
          {
            "buttonId": "camera",
            "showAsAction": "never"
          },
          {
            "buttonId": "invite",
            "showAsAction": "never",
            "isCustomizedClick": true
          },
          {
            "buttonId": "leave",
            "showAsAction": "never",
            "isCustomizedClick": true
          },
          {
            "buttonId": "attendee",
            "showAsAction": "never",
            "isCustomizedClick": true,
            "dialogPos": "center"
          },
          {
            "buttonId": "share",
            "showAsAction": "never",
            "isCustomizedClick": true
          },
          {
            "buttonId": "chat",
            "showAsAction": "never",
            "isCustomizedClick": true,
            "dialogPos": "center"
          },
          {
            "buttonId": "annotation",
            "showAsAction": "never"
          },
          {
            "buttonId": "stop_share",
            "showAsAction": "never"
          },
          {
            "buttonId": "feedback",
            "showAsAction": "ifRoom",
            "isCustomizedClick": true
          },
          {
            "buttonId": "dual_screen",
            "showAsAction": "never"
          },
          {
            "buttonId": "remote_control",
            "showAsAction": "never"
          },
          {
            "buttonId": "record",
            "showAsAction": "never"
          },
          {
            "buttonId": "subtitle",
            "showAsAction": "never"
          },
          {
            "buttonId": "security",
            "showAsAction": "never"
          },
          {
            "buttonId": "network_detection",
            "showAsAction": "never"
          },
          {
            "buttonId": "vote",
            "showAsAction": "never"
          }
        ]
      }
    }
  }
}

NOTE:

The uiConfig of the config function is of the string type. Therefore, you need to convert the preceding JSON string into a character string. For details, see the following sample code.

Sample Code

   
    
      
      /**
* UI configurations
*/
async setInvite(){
    let param = {
        "frame": {
            "confMenu": {
                "toolBar": {
                    "button": [{
                        "buttonId": "invite",
                        "showAsAction": "ifRoom",
                        "isCustomizedClick": true
                    }]
                }
            }
        }
    }
    const apiService = new ApiService();
    // Convert JSON into a string and pass the string.
    let setResult = await apiService.config(JSON.stringify(param));
    if(setResult.ret != 0){
        window.electron.ipcRenderer.send("show-error-alert", "config error = " + setResult.ret);
    }
}

     

   
  