Welcome to our guide on leveraging Yeeflow's Collection control for effective client management. In today's dynamic business environment, maintaining an organized client database is crucial. This article will guide you through setting up a client management collection, providing a clear overview of client details and status. Yeeflow's intuitive features enable users to access key information easily and add pertinent notes for a more comprehensive understanding. Whether you're a seasoned Yeeflow user or a beginner, this guide will help optimize your client management workflow, enhancing overall business efficiency.
1. Getting started with preparing data source of Collection
To showcase the setup of a collection, we will employ a data list titled "Client management" as the data source for configuration of Collection control. Within this data list, there exists a parameter known as "Contact Status," manifested as a single select field offering four alternatives: "Active contact", "Pending Follow-up", "Completed Interaction" , "On Hold", "Unresponsible".
Step2: Adding the Collection control and Connect the Collection with Data Source
You can create a new Dashboard and name it as Collection Page. From the Controls panel of the Dashboard, drag and drop a Collection control. With the Collection control selected, navigate to Content > Data block in the setting panel. Once the Data list "Client Management" is selected as the Data Source, a grid with 12 blank cells would be displayed in the designer Canvas. Each representing a container for one client company's information.
Step 3: Add client information related fields into Collection
Click the "+" button to open the "Add control" panel and find the "Text" field control from the Basic Fields section. Click and drag this Text control into the Collection. In the setting panel of Text, go to Content > Text and click Expression Editor button. Then, choose the Content > Collection item > Company name in the expression panel and click insert. Change the size into Medium
Afterwards, add the” Adress “,” Contact Status “,” Comment “, “and "Industry" field in the same way as above. For longer texts such as” Comment “, you can adjust the Text Length in the field settings and set it to 100 characters. Then, add a static Text control and label it as Status which serves as the directory name of the "Contact Status" field.
To add the logo of each client company to the collection, click and drag a Picture control into the collection. Similarly, in the expression editor, associate the "logo" field in the table with the Picture control. Set the Picture size in Content > Picture block as Full.
To enhance the virilization of the client information, the Icon control can be utilized for embellishment. Click and drag one Icon control into the Collection above the "Address" field. Open the Content > Icon, select the icon of the field (search "location" in the Search Box of Icon library). Change the size of Icon into 15 in Style > Icon block. In the Advance > Advance block, select Inline (auto) from the dropdown of Width.
Step 4: Add buttons with actions in Collection
In the customer management system, to facilitate real-time editing and updating of client statuses, you can incorporate an "Add Record" button. Sales personnel can utilize this button anytime to input specific information about the corresponding client, such as communication details, by simply clicking on it. You can also consider adding a delete button to promptly remove inactive clients.
Click and drag the Button control into the Collection. In the Content > Button block, enter the button's text, "Add Note"; select a icon to display on the button, set Space to 8.
To link the button to the Edit page of each client, go to Content > Action block, select Collection item from the dropdown of the Execute Type. Select Edit Item from the dropdown of Operation. Select Pop-up window from the dropdown of Open in.
To make the button more visual-friendly, in the Style > Button block, set the Normal > Text color to white, Background color to 1A65F8, Radius as 8 for all 4 directions; set the Hover > Background color to 270EB4. In the same block, set top, right, bottom and left spacing as10,40,10,40respectively.
Click the preview button at the bottom left corner, and you can add relevant information on the popped-up editing page to preview the configured button.
Use the same way to insert another button. In the Content > Button block, enter the button's text, "Delete Item"; select a icon to display on the button. To link the button to the Edit page of each client, go to Content > Action block, select Collection item from the dropdown of the Execute Type. Select Delete Item from the dropdown of Operation.
In Style > Button block, set the Normal > Text color to 8A8A92, Background color to E3E3EE, Radius as 8 for all 4 directions; set the Hover > Background color to F13939. Set Spacing as the "Add Note" Button.
Step 5: Format data in collection
To make the content within the collection more visually appealing and readable, we can utilize container controls to arrange and format the controls within the collection. In this section, you can utilize Navigator on left bottom to assist you to clarify different tiers of data in collection.
Insert one container(Container 1) into the collection and drag the “Address" field and the location icon into it.
Use the same way putting the "Status" and "Contact Status" in one container (Container 2). Adjust the width of "Status" field by selecting Custom in Advanced > Width of the Text control. Set the Custom width as 76.
Using the same way, put Company name, container 1 and Container 2 into one Container , put Countries and Industry into on new container (Container 4), put Comment into one Container (Container 5), put two buttons into another container (Container 6). Set Container 5's height into 100 by select Min height from the Layout > Height. Set Justify content to Space around in Layout > Items block.
click the "Save" button on the top-right to save all the changes of this Dashboard.
Example Demo
After Save all the step above. The following image shows the effect of example.
Furthermore
In various scenarios, Yeeflow's Collection control proves highly advantageous, offering a versatile solution for efficient data management. Whether utilized in a list control or variable, the Collection control excels in providing a structured grid layout that can be tailored to specific business needs. Its flexibility allows for easy customization, ensuring a well-organized display of information, and real-time interaction buttons enhance user experience by facilitating quick updates. The control's mobile responsiveness, collaboration features, and efficient filtering contribute to streamlined workflows, making it an invaluable asset in diverse data management scenarios.