Zero to scrm Customer Management in 1 Day

Requirement Analysis

Expected functional interface as follows:

The Customer Management System is primarily used for managing and analyzing customer information, and the system should support the following core features:

1. Customer Information Management: Add, edit, delete, and query customer information
2. Customer Status Tracking: Record all interactions with customers, including phone calls, emails, meetings, etc.
3. Customer Statistics and Analysis: Displaying customer information in charts
4. Batch Customer Transfer: Enables batch transfer of customers to other employees
5. Dynamic Tagging: Quickly add tags for categorization
6. Blocklist: Add to blocklist
7. Public Pool Display: Show unassigned public customers
8. Permission Management: Grant access to different levels of data and functions based on user permission levels.

Requirement Analysis

Based on the above requirements research, we conduct architecture design and technology selection.

Data Architecture

Requires the following two data tables to store customer information and status update records respectively.

tips:

Enum: Selecting one from multiple fixed values; the data source can be hardcoded or derived from dictionary entries.
Boolean: two options, yes and no

Customer Information Table

Field	Code	Type	Remarks
Name	mc	Text	-
Gender	xb	Enum	Male/Female
Phone	dh	Text (Phone)	-
Email	yx	Text (Email)	-
Customer Stage	khjd	Enum	New User/Initial Communication/Prospective Customer/Non-prospective Customer
Add Channel	tjqd	Enum	app/WeChat Mini Program
Responsible Employee	ssyg	Text	-
Tag	bq	Text	-
Status	zt	Enum	Normal (Recently contacted)/Gray (No contact for a long time)/Churn (Deleted)
Customer Type	khlx	Enum	Individual/Company
Remarks	bz	Text	-
Enterprise Name	qymc	Text	-
Enterprise Address	qydz	Text	-
Is Blacklisted	sflh	Boolean	Yes/No
Blacklisted Time	lhsj	Date Time	-
Blacklisted Reason	lhyy	Text	-
Blacklisted Operator	lhczr	Text	-

Customer Follow-up Records Table

Field	Code	Type	Remarks
Customer ID	khId	Text	-
Action	xw	Text	Add to blocklist/Remove from blocklist etc.
Specific Description	jtms	Text	-

Frontend Architecture

Functions such as customer information management, customer status tracking, batch customer transfer, and customer tagging should be placed in the same module for operation.

Therefore, the frontend is divided into the following 4 modules:

1. Customer List
   The list displays customer information with filter conditions: Is Blacklisted: false, Assigned Employee: is not null.
   Supports adding, editing, viewing, deleting, transferring, tagging, blocking, importing, and exporting customers.

2. Customer Statistics
   The charts display information such as the total number of customers, number of new customers added today, number of customers in the public pool, number of blocklisted customers, trend of total customers, trend of new customers, distribution of customer statuses, and distribution of customer stages.

3. Blocklist
   The list displays blocklisted customer information with the filter condition: Is Blacklisted: true.
   Supports viewing, editing, removing, deleting, importing, and exporting customers.

4. Public Pool
   The list displays customer information not assigned to any employee with filter conditions: Is Blacklisted: false, Assigned Employee: null.
   Supports viewing, claiming, transferring, deleting, importing, and exporting customers.

Technology Selection

Customer management scenarios are highly variable and cannot be standardized. Each user will have corresponding custom development scenarios.

Therefore, we choose to use WeDa Visual Development to rapidly build this system.

WeDa is a high-performance low-code development platform for cloud development, supporting rapid creation of data sources and application scenarios. It features built-in integration with the Tencent SaaS ecosystem, enabling seamless connection to the WeChat ecosystem and enterprise WeChat capabilities. Additionally, it supports integration with AI large models, perfectly combining products with AI.

WeDa Product Advantages

Requirements Development

The following introduces development using WeDa.

Access WeDa

WeDa is available in public cloud and private cloud editions.

Public Cloud: Pages can be built through the WeDa official platform, used via the WeDa platform after publishing, or deployed locally after packaging.

Private Cloud: Deploy the WeDa platform on local servers for development and publishing (currently lacks some features compared to the public cloud edition).

The following describes the methods to access the editor in both editions.

Public Cloud Development

Go to the WeDa official website and click Free Trial.

After logging in, access the WeDa console. On the homepage, click Create from Scratch to enter the editor development page, where you can view the Editor Introduction.

Private Cloud Development

On-Premises Deployment Management System Development Tool

First, deploy WeDa locally according to the above documentation. After applying for a license, you can use WeDa.

1. After deployment is complete, log in to the WeDa platform and click Create Application.

2. On the homepage, click Create from Scratch to enter the editor development page.

Data Source Development

In WeDa, all data collections are referred to as data sources, which include data models, APIs (Private Cloud currently only supports http, postman, openapi), and data connectors. For specific usage, refer to the Data Source Overview.

Here we use WeDa's data models for development. Data Model Overview

Public Cloud

Click Cloud Database to enter the data model creation page.

Private Cloud

Click Cloud Database to enter the data model creation page.

Click New Data Model, fill in the name as 'Customer Information'. The identifier serves as the unique ID for the data model, which is automatically generated and requires no adjustment here.

Click the Create button. After successful creation, enter the model configuration page, click Edit, add fields, and enter all field information according to the data structure above.

Enum type fields need to be associated with a dataset; click here to create immediately.

1. Then enter the corresponding dictionary data. Here, taking customer type as an example, click Create Immediately.

2. Enter the name as scrm-Customer Type. By default, we use the 1/2 option identifiers, corresponding to Individual/Enterprise respectively.

3. After clicking OK, you can bind this option set to the Customer Type field.

The option identifier is the data stored in the database, while the option value is the Chinese text used for frontend display.

Similarly, create the corresponding gender enum.

Create status enum.

Create customer stage enum.

Create channel addition enum.

If the options for these enum fields change later, you only need to modify them in the option set for the changes to take effect immediately.

Continue creating Customer Follow-up Records Table

At this point, we have completed the creation of the two tables. Next, we will begin developing the pages.

Page Development

Return to the visual development tab. We confirm that there are four page modules to develop, therefore, we will first create four blank pages.

1. Click the New Page button

2. Select the table and form page template. For the data model, choose the newly created Customer Management. For the page layout, temporarily select the left-side layout.

3. After clicking New, WeDa will automatically create three pages for us. The overall page layout and the main content of individual pages are configured separately. Here, we will first configure all page entry points.

4. Here we clone the customer list twice, and name the cloned pages as blocklist and public pool respectively.

and group secondary pages such as Edit Customer Information and Customer Information Details together for easier future maintenance.

5. After all page entries are created, we proceed to configure the page layout. Click the header to switch to the layout design, select the left-side layout, and click the "One-Click Generate Based on Pages" button. This will generate a directory tree consistent with the above page management directory structure.

Since the detail page does not need to be directly displayed in the directory, delete the Customer Detail Management directory and press ctrl+s to save.

6. Click the header to switch to the page design, and you will see the directory tree on the left is also updated.

Next, proceed with the development of individual modules.

Customer Management

Effect as shown:

Click the list in the editor and adjust as follows in the configuration on the right.

1. The filter conditions are Is Blocklisted: false, Assigned Employee: is not null.

2. Set the sort field to Update time and the sort order to descending.

3. Include fields such as Name, Phone, Status, and Tags in the filter.

4. Column sorting is in the order shown in the figure.

5. Global buttons include Add, Batch Transfer Customers, Batch Block, Batch Delete, Export, Import

Among them, Add, Delete, Export, Import are default built-in function buttons; here we just need to modify their names.

Select the global button in the left outline tree, then click the button under Add/Component on the right to add Batch Transfer Customers and Batch Block buttons.

6. Action buttons include View, Edit, Block, Delete

Among them, the View, Edit, Delete buttons are default built-in action buttons.

Similar to adding global buttons, select the action buttons in the left outline tree, add a Block button, and adjust its position to the third place.

7. The Customer Management page has been initially set up. You can now click the play button in the upper right corner to preview it.

Click New, fill in the information, and click Save.

Return to the list to see that a new data entry has been added.

Clicking Edit also displays the data correctly, and saving after editing updates the data properly.
Next, we will proceed to enhance the transfer customers, block, and custom column display functionalities.

Batch Transfer

When clicking Batch Transfer, you need to select a new responsible employee to update the current data entry.
Therefore, a pop-up is used to select the responsible employee. After confirmation, the responsible employee information of the current data item is updated. Our logic flow is:

Operation Steps:

1. Add a pop-up component for selecting the responsible employee.

The pop-up is closed by default; otherwise, it will appear when the page is opened.

2. In the click event of the batch transfer button, select the logic branch.

Clicking opens the logic branch configuration window, where we click the expand icon.

You can view some global variables provided internally by WeDa and the current expression test results.

Enter the expression below in the code box.

If(!!$w.table1.selectedRecords.length, true, false);

$w is a global variable provided by WeDa, containing all information about the current environment. table1` is the id of the current list.

After input is completed, it is as follows:

3. If conditions are met, open the pop-up component.

4. Select the newly added pop-up, choose the "Open Pop-up" method for execution, where modal3 is the id of the newly added pop-up.

5. If conditions are not met, open the notification pop-up.

6. The title is System Prompt, and the content is Please select the customer(s) to be transferred.

7. Click Save in the top right corner.

8. Return to the newly added modal box and add a personnel field to it.

9. Configure the event for the confirm button at the bottom of the pop-up, select a logic branch, and set the judgment condition to the following expression:
   merber2 is the id of the newly added employee field.

If(!!$w.member2.value.length, true, false);

10. When conditions are met, call the data source method.

11. For the data source name, select Customer Management; for the method, choose Modify Multiple.

We need to update the selected data. Therefore, in the query condition (object), we add a filter condition: when data identifier equals any value in the set of data identifiers of the selected list items.

We obtain the set of data identifiers of the selected list itemsvia an expression: table1is the current list id. selectedRecords` is the data of selected items in the list.
We use the map method in JavaScript to return the _id (data identifier) of each item.

$w.table1.selectedRecords.map((it) => it._id);

Since we only need to update the responsible employee field, we adjust the responsible employee under the data parameter and select an expression.

12. Since the responsible employee is a personnel field with an array data structure, but the responsible employee field in the table is in string format, we need to modify all data source method calls to return this field as a string structure.

Here, create a global method named transSSYG to convert arrays to strings.

The specific transSSYG code is as follows:

export default function (arr) {
  return arr ? (typeof arr === "string" ? arr : arr.join(",")) : "";
}

Global methods are referenced as $w.app.common.methodName.

Input the following expression:
merber2 is the id of the newly added employee field.

$w.app.common.transSSYG($w.member2.value);

12. Since the personnel field is stored in array format, but the responsible employee field in the table is in string format, we create a global method named transSSYG here to convert arrays to strings.

13. Close the pop-up on success

14. Continue to display the success message

15. Refresh the current list page

16. Click 'Save' to complete the development of the entire transfer function

Blocking

When clicking Block or Batch Block, you need to fill in the reason for blocking. Therefore, a pop-up window is used to fill in the reason for blocking. After confirmation, the current item's data will be updated with isBlocked: true, blockingReason: the filled text content, blockingTime: current time, blockedBy: current logged-in user's userId, etc. Our logic flow is:

When clicking 'Block', the pop-up window cannot retrieve the clicked row's data. Therefore, it is necessary to create a global variable to store the currently clicked row's data by adding an object variable named cur_kh on the current page.

The overall process is similar to the above-mentioned batch transfer function, with the development flow presented here in a slightly simplified manner.

1. Create New Pop-up

Add a multi-line text field in the pop-up to store the reason for blocking.

2. When clicking Batch Block or Block, open this pop-up.

When clicking Batch Block, first check if there are any selected items in the list. If not, prompt the user to select customers to block.
If the Block button in the action column is clicked, a global variable needs to be set.

3. Edit the click event for the confirm button in the pop-up

First, add a conditional check to determine if the blocking reason is empty. The expression is as follows:
textarea1` is the id of the text box for the blocking reason.

If(!!$w.textarea1.value, true, false);

4. If the condition is met, check whether the global variable cur_kh has a value.
   The reference method for global variables is: `$w.page.dataset.state.variable_name

If(!!$w.page.dataset.state.cur_kh._id, true, false);

5. If there is a value, update a single record; if no value (indicating batch blocking), update multiple records.
   The query conditions for a single record update are as follows:

$w.page.dataset.state.cur_kh._id;

Update the data object as follows:

$w.auth.currentUseris a built-in method provided by$wto retrieve current user information. $w.Now() is a built-in method provided by $w to retrieve the current time.

The query conditions for multiple updates are as follows:

The input parameters for multiple updates are the same as those for single updates.

6. After a successful update, create records in the Customer Follow-up Records Table: a single record for a single update, and multiple records for multiple updates.

The parameter structure for creating a single record is as follows:

When creating multiple records, the number of records cannot be dynamically determined; therefore, an expression-based method is used here for creation.

Obtain the currently selected records in the list via $w.table1.selectedRecords, and use the map method to return the parameters for each new data record.

$w.table1.selectedRecords.map((it) => ({
  xw: "Add to blocklist",
  jtms: $w.textarea1.value,
  khId: it._id,
}));

7. When closing the pop-up, set the cur_kh variable to null.

Custom Labels

Since there is a requirement to dynamically add tags and display them in tag format, a custom tag component has been created. It is displayed in custom columns within the customer list, as well as on add, edit, and other pages.

The specific creation process is as follows:

1. Select the tag column as a custom column.

2. Add the following nodes to the custom slot

Loop through the general containers. The text in each general container is tag content, and the button is a delete button. We will add some styles to this general container.

The button below the loop display is the add button.
The data source is the current row's label data. Since the labels are stored in string format, they need to be converted to array format for rendering.

The expression for looping through and displaying data is as follows:
`$w.table1.cell_bq.record is the current row's data.

!!$w.table1.cell_bq.record.bq
  ? $w.table1.cell_bq.record.bq.split(",").map((it) => ({
      label: it,
      value: it,
    }))
  : [];

3. Click the Add button

Clicking the Add button saves the current row's data and opens a pop-up window for filling in the tag content. After completion, click Confirm to update the current row's data.

The steps are as follows:

Create a pop-up component and place a text field for label content inside it.

On click, set the global variable cur_kh to the current row's data and open a pop-up window.

When the OK button is clicked, call the update single record method to update the current row's data.

The input parameters for updating the current row's data are:
$w.page.dataset.state.cur_kh` is the current row's information. $w.input1.value` is the text content in the pop-up.

Check if the current row has a label. If yes, concatenate with a comma; if not, directly assign the label as the text content in the pop-up.

$w.page.dataset.state.cur_kh.bq
  ? `${$w.page.dataset.state.cur_kh.bq},${$w.input1.value}`
  : $w.input1.value;

and call the Customer Follow-up Records Table to add a record (same as the blacklist function). The parameter structure is as follows:

({
  xw: "Add Tag",
  jtms: `Add [${$w.input1.value}] tag`,
  khId: $w.page.dataset.state.cur_kh._id,
});

4. When closing the pop-up, set the cur_kh variable to null.

5. Click the Delete button

When the delete button is clicked, a pop-up appears for secondary confirmation. After successful confirmation, obtain the current row's data and update it, setting the label field value to the following expression:
`$w.table1.cell_bq.record is the current row's data.
$w.index_repeater1 is the index of the currently clicked delete button.

$w.table1.cell_bq.record.bq
  .split(",")
  .filter((_, idx) => idx !== $w.index_repeater1)
  .join(",");

Similarly, after deletion is completed, also call the Customer Follow-up Records Table to add a record (same as the blacklist function). The parameter structure is as follows:

({
  xw: "Remove Tag",
  jtms: `Remove [${$w.item_repeater1.label}] tag`,
  khId: $w.table1.cell_bq.record._id,
});

Customer Edit Page

1. Since it is necessary to display customer dynamics, tabs can be used to separately display basic information and customer dynamics.

2. When Block Status is Blocked, the block reason module displays relevant blocking information.

3. When Customer Type is Company, the company module form is displayed for entering company information.

4. Customer dynamics are displayed in a data list by selecting the data model Customer Tracking Record.

In each form, only data relevant to the current form needs to be displayed; therefore, the filter conditions are as follows:
$w.page.dataset.params._id is the parameter received by the current page.

5. The responsible employee field is changed to the personnel field. Since the personnel field can accept string-format data for display but stores data in array format, this field needs to be converted to a string during saving. Modify the form submission event parameters as follows:

({
  ...$w.form2.submitParams,
  _id: $w.page.dataset.params._id,
  data: {
    ...$w.form2.submitParams.data,
    ssyg: $w.app.common.transSSYG($w.form2.submitParams.data.ssyg),
  },
});

6. The tag field in the detail page is also consistent with that in the list items.

Create a container, replace the label tag with a text field, use a repeater component to display tag content, and add a button at the back for adding new items.
The content of the loop display component is consistent with the tag column in the external list.

The data for the loop display component comes from the tag field of the current form item. Since the tag data in the form is stored as a string, it needs to be converted to an array before being assigned to the loop component.

The expression content is as follows:

!!$w.form2.value.bq
  ? $w.form2.value.bq.split(",").map((it) => ({
      label: it,
      value: it,
    }))
  : [];

When clicking the Add button, a pop-up window is required to fill in the new tag content, consistent with the operation method of the external list. Add a new pop-up container in the current page.

Clicking the Add button opens a pop-up window with a text field placed inside it.

When clicking the confirmation button in the pop-up window, check whether the tag content is filled. If the validation passes, execute JavaScript to reassign the value of the tag field in the current form by appending the new tag content.

js script as follows:
$w.input4.value` is the text content in the pop-up.

({ event }) => {
  const bq = $w.input4.value;
  if ($w.form2.value.bq) {
    $w.input1.setValue({
      value: `${$w.form2.value.bq},${bq}`,
    });
  } else {
    $w.input1.setValue({
      value: bq,
    });
  }
};

Customer Add Page

Since the Add page does not display customer dynamics, copy the edit page, delete the tab component, and retain only the main form fields.
Modify the form scenario to "creation"

The commit event parameters are adjusted as follows:

({
  ...$w.form2.submitParams,
  data: {
    ...$w.form2.submitParams.data,
    ssyg: $w.app.common.transSSYG($w.form2.submitParams.data.ssyg),
  },
});

Customer Details Page

The details page and the edit page are identical, so the edit page can be shared. When clicking View from the list to navigate to the details page, use the edit page and pass formType as read.

The submit button in the edit page, as well as the tag delete and add buttons, all need to check whether the current form is not in a read-only scenario.

The visibility expression is as follows:

$w.page.dataset.params.formType !== "read";

Customer Statistics

Effect as shown:

The chart displays customer information across the following dimensions

Name	Chart Type	Data Source
Total Customers	Statistical Card	Customer Information/Statistics
New Customers Today	Statistical Card	Customer Information/Statistics
Public Pool Customers	Statistical Card	Customer Information/Statistics
Blocklist Count	Statistical Card	Customer Information/Statistics
Total Customer Trend	Line Chart	Custom APIs
New Customer Trend	Line Chart	Customer Information
Customer Status Distribution	Pie Chart	Event Stream/Custom Variables
Customer Stage Distribution	Pie Chart	Event Stream/Custom Variables

Total Customers

1. Use the statistical card component for rendering, and select Statistics as the data source.

2. Set the filtering rule to exclude blocklisted users.

3. For field selection, select 'All'; for the statistical method, choose 'Count'.

New Customers Today

1. Same as Total Customers, select Customer Information Statistics as the data source.

2. The filter conditions are: Creation time > 00:00 today, Is Blocklisted: false
   Timestamp for today at 00:00 new Date(new Date().toLocaleDateString()).getTime()

Public Pool Customers

1. Same as Total Customers, select Customer Information Statistics as the data source.
2. The filter conditions are: Assigned Employee: null, Is Blocklisted: false

Blocklist Count

1. Same as Total Customers, select Customer Information Statistics as the data source.

2. The filter conditions are: Is Blocklisted: true

Total Customers Trend

This chart primarily displays the accumulated data from the customer information table based on creation time. Therefore, processing the table data is required. This is implemented using custom APIs development by adding a new API method that processes data with custom code (not currently supported in private cloud).

The specific custom code is as follows:

const dayjs = require("dayjs");

module.exports = async function (params, context) {
  const res = await context.callModel({
    dataSourceName: "khxx_dpevgv2", // Data model name
    methodName: "wedaGetRecordsV2", // method name
    params: {
      select: {
        createdAt: true,
      },
      orderBy: [
        {
          createdAt: "asc",
        },
      ],
    },
  });

  const formatStemp = (time) => {
    return dayjs(time).format("YYYY-MM-DD");
  };

  const transData = ({ x, y }) => {
    return {
      XLabel: {
        Value: x,
      },
      YLabels: [
        {
          Name: "Total",
          Value: y,
        },
      ],
    };
  };

  const getX = (data) => {
    return data.XLabel.Value;
  };

  const getY = (data) => {
    return data.YLabels[0].Value;
  };

  const result = res.records.reduce((arr, itm) => {
    if (!arr.length) {
      arr.push(
        transData({
          x: formatStemp(itm.createdAt),
          y: 1,
        })
      );
    } else if (getX(arr[arr.length - 1]) === formatStemp(itm.createdAt)) {
      arr[arr.length - 1].YLabels[0].Value += 1;
    } else {
      arr.push(
        transData({
          x: formatStemp(itm.createdAt),
          y: getY(arr[arr.length - 1]) + 1,
        })
      );
    }
    return arr;
  }, []);

  return {
    result,
  };
};

New Customers Trend

This chart needs to display accumulated data by day based on creation time, thus a line chart can be directly used. Select the X-axis dimension as creation time and the Y-axis statistical method as count.

Customer Status Distribution / Customer Stage Distribution

This chart requires mapping the values of the status and customer stage fields (both are enumerations), and then counting the data in the customer information table by status and stage.
The operation steps are as follows:

1. Create a new object variable on the current page: pieChatData

2. Create event flow: setPieChatData on the current page

3. In setPieChatData, the first step is to fetch the full dataset from the customer information table.     Since only the status and customer stage fields are required here, configure the associated table query selection (object) as follows:

{
    "zt": true,
    "khjd": true
}

4. After the data is successfully retrieved, execute the following JavaScript code:

({ event }) => {
  const arr = event.detail.records;

  const transData = ({ x, y }) => {
    return {
      XLabel: {
        Value: x,
      },
      YLabels: [
        {
          Name: "Total",
          Value: y,
        },
      ],
    };
  };

  const formatVal = (val, code) => {
    return $w.app.utils.formatEnum(val, code, $w.app);
  };

  const getChatVal = (type, code) => {
    return Object.entries(newArr[type]).map(([key, value]) => {
      const newKey = key === "other" ? "Unknown" : formatVal(key, code);
      return transData({
        x: newKey,
        y: value,
      });
    });
  };

  const newArr = arr.reduce(
    (obj, itm) => {
      const ztKey = itm.zt || "other";
      obj["zt"][ztKey] = obj["zt"][ztKey] ? obj["zt"][ztKey] + 1 : 1;

      const jdKey = itm.khjd || "other";
      obj["jd"][jdKey] = obj["jd"][jdKey] ? obj["jd"][jdKey] + 1 : 1;

      return obj;
    },
    {
      zt: {},
      jd: {},
    }
  );

  const obj = {
    zt: getChatVal("zt", "scrm_status"),
    jd: getChatVal("jd", "scrm_followStatus"),
  };

  $w.page.dataset.state.pieChatData = obj;
};

5. Call setPieChatData when the current page is displayed

Blocklist

This page is similar to the customer management page, except that the data filtering criteria and functional buttons differ. Therefore, copy the customer management page and modify it accordingly.

1. The filter conditions are: Is Blocklisted: true

2. Global buttons include Batch Remove Customers, Batch Delete, Export, Import

3. Action buttons include View, Edit, Remove, Delete

Removing

Same as blocking in customer management
When clicking Remove or Batch Remove, a pop-up window will appear to fill in the reason for removal. After confirmation, the current item's data will be updated with isBlocked: false, blockingReason: empty, blockingTime: empty, blockedBy: empty, etc. The logic flow is as follows:

To set the data to empty, expressions are used to input parameters. When calling the update customer information method, the parameters are as follows:

Public Pool

This page is similar to the customer management page, except that the data filtering criteria and functional buttons differ. Therefore, copy the customer management page and modify it accordingly.

1. The filter conditions are Is Blocklisted: false, Assigned Employee: null.

2. Global buttons include New, Batch Delete, Batch Transfer Customers, Batch Claim, Export, Import

3. Action buttons include View, Claim, Delete

Batch Transfer

Same as batch transfer in customer management

Claim

Clicking Claim changes the assigned employee in the customer information to the current user. The button event sequence is as follows: 01. Secondary confirmation 02. After successful confirmation, call the update customer information method 03. Only update Assigned Employee: current user is required.

The query conditions are:

The data identifier equals the current row's data _id (data identifier).

The parameters are as follows:

({
  ssyg: $w.auth.currentUser.userId,
});

Batch Claim

Same as the claim function, change the query conditions to:

The data identifier equals any one of the set of _id (data identifier) for the currently selected rows in the list.

Parameters are consistent.

Log in.

Enter the left-side application settings, select Access Control, choose Post-Login Access, and select Account Password Login.

Log Out

We add a logout function here. You can refer to the documentation center for implementation details.

Here, upon entering, we see that the logout function can be performed by clicking a button to execute a js script.
Similarly, in the global area of the code section at the bottom left of the editor, click the + button and select New JavaScript Method in the pop-up layer.

In the pop-up code editor, copy and paste the script indicated in the above documentation, rename the method to signout, and click Save in the upper right corner.

Next, delete the Product Documentation text component at the bottom left of the designer, modify the left-side icon, add a button, and change the button name and type.

In the Click event at the bottom right corner, select JavaScript Method.

Select custom method signout

Click Save in the upper right corner of the event box.

Publish

After completing the above configuration, you can publish to the trial version to view it. Publish Application

After successful publication, an access to the trial version will be provided. Upon entering, you can view the page.

Trial Version

Login Page

Home

Client Management

Installation Sample

Source Code

Click Source Code to download scrm_0.0.3.zip

Enter the WeDa console, locate the Templates module, select Custom template, and click Import.

After successful import, you can see a scrm template in the templates.

Click the name or edit button to view the template details, including the data sources, number of applications, roles, etc. contained in the application.

Click Edit Application and Access Application to start using it immediately.