Actual Combat | How to use Wi-Fi low code to filter data by conditions

In the development and application process, it is inevitable that the function of conditional query will be used. This article will introduce in detail how to use the mini-code to filter data by condition.

Business logic

We set the query conditions in the application member list, and filter the data according to the input conditions. The specific effect is as shown in the figure below

We enter the mobile phone number in the input box of the mobile phone, click the query button to filter the data, the filtered data is as follows

specific operations

We find the member's list page and add corresponding components. Our idea is to place form input components and button components in the container

In order to display the form input and buttons on one line, we need to set the style of the container component

The button is a bit big, we can set a height

After the style is set, we need to consider how to get the value of the form input component, here we add a variable to the variable management

Then bind the variable to the form input component

We define a low code, the main function is to dynamically change the value of this variable when inputting content in the form input component

export default function({event, data}) {
    $page.dataset.state.phone = event.detail.value
}

Then set the change event option on the event tab of the form input component as the low-code method

In this way, the value of the variable can be dynamically changed when the content is entered in the form. The next step is to set the event of the button. Similarly, we also add a low-code method

export default async function({event, data}) {
const phone = $page.dataset.state.phone
console.log(phone)
const memeber = []
if(phone!=""){
member = await app.cloud.dataSources.member.getList({
phone:phone
})
}else{
member = await app.cloud.dataSources.member.getList()
}
$page.dataset.state.memberlist = member
}

The logic of the code is to first obtain the mobile phone number, then call the database list method, pass the mobile phone as a parameter, and assign the returned result to the list collection variable to achieve the purpose of refreshing and filtering the data

After the low code is set, we can add a click event to the button, just select the low code we just created

This function is done

summary

This tutorial is how to filter data based on query conditions. It mainly introduces variable creation, variable assignment, and low-code method settings. For students who don’t have a development foundation, you can follow the tutorial. If you don’t, combine the official video tutorial and API documentation. For reference, if you do too much, you will be able to do it proficiently.
Author: Han Kai, evangelist with low code in WeTao

Product Introduction

Tencent Cloud Microcode is an efficient and high-performance drag-and-drop low-code development platform that connects up to the front-end industry business and down to the massive capabilities of cloud computing to help enterprises go to the cloud vertically. Tencent Cloud's low-code build abstracts the cumbersome underlying architecture and infrastructure into a graphical interface, and quickly builds multi-terminal applications (small programs, H5 applications, Web applications, etc.) through industrial templates, drag-and-drop components, and visual configuration, eliminating In order to write the code, you can fully focus on the business scenario. Tencent Cloud's low code uses cloud development as the underlying support. The cloud native capability opens up the full link of application construction, provides a highly open development environment, and always escorts your applications.
Open WeChat Low Code: https://cloud.tencent.com/product/weda?tdl_anchor=techsite
Product documentation: https://cloud.tencent.com/document/product/1301/48874?from=12763
Technical exchange group, latest information, follow WeChat public account [Tencent cloud low code]