Platform Introduction
Develop Process
Quick Starts
Develop Web Apps
Develop Bots
Develop Gadgets (Not Recommended)
Develop Docs Add-ons
Develop Base Extensions
Develop Workplace Blocks
Message Card
SSO&End User Consent
AppLink Protocol
Configure App Entry
Tools and SDKs
FAQ
Management Practice
Platform Notices
Deprecated Guides
Developer GuidesDevelop Docs Add-ons

Docs add on introduction

block introduction

What is the docs add on(document widget)? What's the value?

"Docs Add On" is a new set of open capabilities launched by Lark Documents. It supports enterprise IT and third-party service providers to develop applications in various vertical scenarios, realizes the connection between document collaboration and enterprise workflow, and improves efficiency.

  • For enterprise IT: You can quickly integrate business workflows into documents through self-built applications to meet vertical business scenarios and reduce costs and increase efficiency. Such as opening up the project management system, opening up the OA approval system, opening up the task supervision system, etc.
  • For third-party service providers: You can publish applications in specific scenarios by putting widgets on the shelves, for users to call directly in the document. Such as format checking tools for auxiliary typesetting, applications for browsing 3D modeling models, applications for generating UML graphics from Mermaid code, etc.Ordinary users can quickly call the above widgets in the process of document collaboration, and get the work done with one document. Specific [Use Case] and [Use Steps] see below for details.

Case sharing

Case 1: Anker Innovations opened up the self-developed "problem management system", and used documents to efficiently handle problems and achieve rapid response

dimensionDescription

Scenario

Business Process Management (BPM), such as problem management, is one of the core management processes in the manufacturing industry. Enterprises usually use a professional problem management platform for unified management.

Current Status

Old Problem Management Process
In the old process, the complexity of the system is high due to the many judgment conditions involved in task distribution. Regardless of the size of the problem, it needs to be approved by the person in charge of each node before proceeding to the next step. At the same time, due to the limited information format in the system, the problem data cannot be completely stored in the system, but stored in cloud documents. For each problem recorded in the problem management system, according to the priority, problem scope, size and other information, it needs to be discussed by the business side of Lacy to produce a solution, which will form a relatively complicated process (As shown in the picture below).

image.png

Pain points
1. The complex process leads to a long problem management cycle, which can easily lead to untimely problem handling and difficult follow-up of unclosed problems.
2. The information between the document and the problem management platform is not interoperable , repeated operations increase the workload of employees, resulting in inefficient problem solving.

Solution

Solution
In order to promote the smooth progress of the project, Anker Innovations created a small component of the problem management system in the cloud document to connect the problem management system and document information, using The document carries all the context of the problem, directly updates the progress of the problem in the document, simplifies the input process, handles the problem efficiently, and achieves a quick response.

image.png

New process for issue management

image.png

Integration method
STEP1: Insert a "problem management widget" in the cloud document
1. Enter the KEY value in the widget, click "Synchronize to document" to bind Determine the records corresponding to the KEY in the "Issue Management System" and display them in the widget.
2. Widgets support a variety of standard components. You can call these components to draw a table in the document to record data.

image.png

STEP2: Synchronize the "Problem Management Widget" data back to the "Problem Management System"
1. After recording the problem information in the widget, click "Synchronize to System" to update the data to the "Problem Management System" "
2. You can get the user information of the person who filled it out through the Open API and add it to the record automatically.
3. You can also quickly access the data collaboration capability of the widget to support multiple users to edit collaboratively in the same widget.

image.png

Solution Advantages

Lightweight approval and synchronization, simplify task tracking
Like other BPM systems, the problem management system pays great attention to the simulation of the real world. In actual operation, since there are many determinants and coordinating departments in the judgment and distribution of tasks, each step of task advancement needs to be approved by each department in turn, and the process is cumbersome and difficult to track problems.

By integrating the cloud document block of the issue management system
you can manage tasks within the document. Update the information directly through the block, and synchronize it back to the problem management platform with one click, without requiring layer-by-layer approval and entry. The process that originally took several days to complete can now be completed in a few minutes, realizing lightweight management issues and efficient flow of tasks.

Centered on cloud documents, efficiently judge and distribute tasks
With the cloud document block of the problem management system, project members from different departments can write problem-related information in one document , using the collaboration capabilities of cloud documents, @related colleagues or commenting with words, communicate, judge, and distribute tasks efficiently. The discussion process and conclusions are directly recorded in the cloud document, and the query management platform is synchronized through the block. There is no need to switch between different systems, and the focus of problem management returns to dealing with the problem itself rather than completing the process.

image.png
Question The data is deposited in the document, and the information is complete and easy to obtain
Use the problem management system to manage the process of problem handling, clarify the nodes and the role of each node in the process, so that everyone can work better after having a panoramic view. Using cloud documents to complete the judgment and distribution of problem tasks can not only handle problems efficiently, but also record the context of the problem in the document. Using Lark's knowledge base, global search, and enterprise encyclopedia capabilities, it can be precipitated and managed in a unified manner at any time ,quick search.

image.png

Case 2: Based on the open capability of the document widget, the developer has developed several practical creative efficiency tools

App NameDescription

Text Drawing

Use Mermaid language to quickly create complex graphics such as flowcharts and sequence diagrams with a few lines of text code

  • Real-time view preview editing effects, what you see is what you get
  • Built-in a variety of graphic templates to help you get started quickly

    image.png

    image.png

Batch format setting

Supports quick setting of BIUS, font color, alignment, etc. as many as 13 text formats, "swipe" to quickly apply the set format, helping you write with half the effort

image.png

Text typesetting assistant

Your smart format correction assistant, detect format problems (Chinese and English spaces, middle spaces, full-width and half-width symbols, etc.), one-click optimization, improve work efficiency

image .png

Question & Answer Interaction

Information collection tool, full of interactive quizzes, questions, answers, likes, automatically sorted by popularity, all in the Q&A interactive application

image.png

image.png

Timeline

Graphically express the development process, milestones, key points, etc. of projects and events in time, steps, and sequence. Help document editors to express efficiently and vividly, and readers to read efficiently and happily

image.png

image.png

How do ordinary users use the document widget?

How to find out?

Plus menu or "/" shortcut commandTop menu bar
image.png

image.png
image.png

What types of components are there?

embedded custom contentfloatingfullscreeninline (future expansion)
image.png

image.png
image.pngimage.pngimage.png

Introduction to Document Opening Solution

Provide an application market for document widgets to help users discover and manage their own components

Support users to independently explore and discover document applets, which will appear in the personal list after installation.image.pngimage.png

Which capabilities of the document will be released?

CapabilityDetails

Document information available

Self information: document title, content (block type and data), statistical data, permission information, history
Environmental information: dark mode, document mode, multilingual

Callable document functions

Content operations: toolbar, selection/conversation components, business card preview, image preview, copy and paste, undo and restore, expand/collapse blocks, etc.
Container operations: window scrolling, container ratio Adjustment, prompt message configuration, modal pop-up window

Editable document content

Specific content: title, body (text, picture, table, task, formula, @, file, cloud document, iframe, etc.)
Formatting: heading formatting, text bold/italic/underline/color, quotes, separators, ordered/unordered lists, code blocks

Note: editing of third-party content is not supported, such as in Actions for iframes in cloud documents.

Perceived document changes

User operations: opening and closing of documents, changes in document content, floating selection of Block
User permissions: readable, editable, commentable

Can interact with users

Identify user identity, obtain user authorization, read progress perception, permission perception, collaborative editing

You can fully control the widget itself, custom rendering

Change its own shape (embedded block, full screen, floating, text expansion)

  • Read and store data
  • External capabilities can be introduced

FAQ: What technical skills are needed to develop a small component

  1. Widgets use web page development technology, and the external operating environment of widgets can be imagined as a browser. As long as the program can run in the browser, it can be regarded as a widget.
  2. For a front-end engineer, we do not limit what framework you use, you can choose the technology stack or component library you are familiar with. We also provide you with out-of-the-box templates and tool sets for service building, debugging, and publishing, which are based on the React ecosystem. Of course, you can also choose the toolset you are familiar with and deploy the service to our CDN server.
  3. Finally, I hope that you have: basic knowledge of HTML, CSS and JavaScript web pages, can read basic technical API documents, and the cost of widget development is very low. Come and try it out.