Integrate PageWidget SDK for Drive Module Embedding - Drive and Photo Service

This topic describes how to use PageWidget.

1. Configure the constructor

Set the mount point and style for the iframe of the widget.

By default, the iframe is mounted to the body element. Set the mount point for the iframe as needed.

<div id="container"></div>

import { PageWidget } from 'aliyun-pds-js-widget';

const domain_id = 'bj1'; // Your domain ID.
const token_info = {
  access_token: 'xxxxx',
  refresh_token: 'xxxxx',
  // ...
};

const widgetOpts = {
  widget_endpoint: `https://${domain_id}.apps.aliyunpds.com`,
  // The mount point.
  container: document.querySelector('#container'),
  // The custom style.
  iframe_style: {
    width: '100%',
    height: '100%',
  },
  // The embedded page.
  module: 'drive/user',
  token_info,
  // Configure the function that obtains refreshed tokens. 
  refresh_token_fun: async () => {
    // The business processing logic. Call the refreshToken operation that is encapsulated on the server. 
    // new_token_info Obtain the new token from the server.
    // let new_token_info = await fetch(.....)
    return new_token_info;
  },
};

const ins = new PageWidget(widgetOpts);

PageWidget constructor parameters

Parameter	Type	Required	Description
module	string	Yes	The component name. For more information, see 4. Details about the module parameter.
widget_endpoint	string	Yes	The URL that is used to access the component. In most cases, the value of this parameter is the domain name that hosts the application.
container	string or HTMLElement	Yes	The element that is used to mount the component.
lang	string		The language. Valid values: zh_CN and en_US. For the first time, the language specified by the navigator.language property in the browser is used by default.
token_info	Object	Yes	The JSON object for the access token.
share_token	string		The access token for sharing, which is required when you share resources.
refresh_token_fun	Function	Yes	The method that is used to refresh the access token when it expires. After the method is called, a new access token is returned.
refresh_share_token_fun	Function		The method that is used to refresh the access token for sharing when it expires. After the method is called, a new access token for sharing is returned.
iframe_style	Object		The custom iframe style.
iframe_attr	Object		The custom iframe attribute.
menus	{name:string, hide:boolean}[]		The menu items related to file operations. You can hide specific menu items. Example: [{name: "sharelink", hide: true}]. name indicates the item name. For more information, see 5. Details about the menus parameter.

2. Configure the instance

Sample code:

const ins = new PageWidget(widgetOpts)

// Call a method.
ins.setLang('zh-CN')

Methods supported by PageWidget

Method	Description	Parameter description
setToken	Sets the logon state of the component.	A JSON object that contains the token information.
removeToken	Clears the logon state of the component.	N/A
setLang	Sets the language of the component.	A string that indicates the language. Replace the hyphen (-) with an underscore (_). For example, if you want to use simplified Chinese, set the value to zh_CN, which corresponds to zh-CN in browsers.
setShareToken	Sets the sharing token for the component.	string
on	Listens to events.	See below for details.
destroy	Destroys the component.	N/A
changeModule	Changes the component.	A string that indicates the component name, such as "drive/user". For more information, see 4. Details about the module parameter.
setMenus	Sets the menu items.	The menu items related to file operations. You can hide specific menu items. Example: [{name: "sharelink", hide: true}]. name indicates the item name. For more information, see 5. Details about the menus parameter.

3. Listen to events

Enable event listening for the component. When a specific event occurs on the component, the corresponding callback is returned.

Sample code:

const ins = new PageWidget(widgetOpts);

ins.on('Event name', function(data) {
  // do something...
})

Supported events

Event	Description	Payload parameter
load	The component is rendered and triggered for the first time.	N/A
error	A component error occurs.	An object that is triggered when a component error occurs. Example: {code: "TokenExpired", mesage:"xxx"}.
tokenChanged	The token for the component is changed.	An object, which is `token` or `null`.
shareTokenChanged	The sharing token for the component is changed.	An object, which is `share_token` or `null`.
langChanged	The language of the component is changed.	A string that indicates the language, such as `zh_CN`.
routerChanged	The route of the component is changed.	A string, which is a URL path that starts with a slash, such as `/disk/widget/drive/user`.
fileChanged	A file change occurs.	A string in the format of {"type": "copy", "fileList": []}. type indicates the type of the file operation and `fileList` indicates the file information. See details about the fileList parameter below.
preview	Preview starts or stops.	An object that contains the file information. The value is `null` when preview stops.
popup	The status of the pop-up window is changed.	A string in the format of {"visible": false}. `visible` is a Boolean object. When the pop-up window is visible, the value is `true`. Otherwise, the value is `false`.

Error codes for specific error events

TokenInvalid: The token is invalid or not specified.
TokenExpired: The token has expired.

For information about other error codes, see Error handling.

Callback parameters of the fileChanged event

ins.on('fileChanged', ({type, fileList})=>{
  // Handle the callback.
})

Parameter

Required

Type

type

Yes

string

star: add to favorites
copy
move
delete: add to the recycle bin
remove: permanently delete
restore: remove from the recycle bin
remark: modify the remarks
rename
create
upload

fileList

Yes

Object

Required attributes:

drive_id: the drive ID, which is a string.
file_id: the file ID.
parent_file_id: the ID of the parent file or folder.
type: the type. Valid values: file and folder.

Optional attributes:

name: the file name.
created_at: the time when the file was created, in the ISO 8601 standard.
size: the file size, in bytes. This attribute is available only if the value of the type attribute is file.
starred: indicates whether the file was added to favorites. The value is a Boolean value.
updated_at: the time when the file was updated, in the ISO 8601 standard.

4. Details about the module parameter

Use the constructor parameter module to configure the component, or call the changeModule method to change the component.

Components supported by PageWidget

User interface (UI):

drive/group: team space
drive/enterprise: enterprise space
drive/user: personal space
mycategory/image: my pictures (search results page)
mycategory/video: my videos (search results page)
mycategory/audio: my audio (search results page)
mycategory/doc: my documents (search results page)
ishare: my shares
share: received shares
star: my favorites
handover: received drives
mysharelinks: my shared links
trash: recycle bin

Admin console:

groups: team management
udrives: user drives
tdrives: team drives
shareConfig: share authorization settings
shareLinkManagement: shared links management
logAudit: log audit
standardCustom: standard customization
seniorCustom: advanced customization
fileAccess: file access
fileSettings: file settings

Components supported by PreviewWidget

office/preview: document preview
office/editor: document editing
video/player: video playback

Sample code:

const widgetOpts = {
  module: 'drive/user',
  // ...
}
const ins = new PageWidget(widgetOpts);

ins.changeModule('drive/group')

5. Details about the menus parameter

Use the constructor parameter menus or call the setMenus method to hide or show specific menu items that are related to file operations. Set the value of hide to true to hide a menu item and false to show a menu item.

download
share
sharelink
move
copy
star: add to favorites/remove from favorites
rename
remark
detail
share_owner
delete

Sample code:

const widgetOpts = {
  menus: [
    { name: 'download', hide: false },
    { name: 'copy', hide: false },
    { name: 'move', hide: false },
    { name: 'rename', hide: false },
    { name: 'delete', hide: false },
    { name: 'remark', hide: false },
    // ...
  ],
  // ...
}

const ins = new PageWidget(widgetOpts);

ins.setMenus([
    { name: 'download', hide: false },
    { name: 'copy', hide: false },
    { name: 'move', hide: false },
    { name: 'rename', hide: false },
    { name: 'delete', hide: false },
    { name: 'remark', hide: false },
  // ...
])