Managing sales processes effectively is crucial for any organization, but it becomes increasingly challenging when relying on platforms like Salesforce. While Salesforce offers robust capabilities, the high costs per user, the complexity of its systems, and the limited ability to query data often create roadblocks, which can slow down your team's efficiency and hinder their ability to make informed decisions in real time.
This blog delves into how combining Retool with Salesforce can transform the way your sales team operates. Retool offers a more flexible, user-friendly approach to building customized sales applications that not only reduce costs but also enhance data visibility and accessibility. By overcoming the limitations of Salesforce, Retool enables your team to work smarter, streamline processes, and ultimately achieve better sales outcomes.
What is Salesforce?
Salesforce is a leading customer relationship management (CRM) platform that helps businesses manage their customer data, sales processes, and marketing efforts. It offers a wide range of tools and features designed to streamline operations and improve customer interactions. Salesforce's cloud-based system allows for easy scalability and access from anywhere, making it a popular choice for businesses of all sizes.
Key Features of Salesforce:
Comprehensive CRM Tools: Manage customer relationships, track interactions, and store information on one centralized platform.
Scalability: Suitable for businesses of all sizes, from startups to large enterprises.
Customizability: Allows for custom workflows, automations, and integrations tailored to your business needs.
Cloud-Based Accessibility: Access your data and tools from anywhere with an internet connection.
Salesforce is undoubtedly a powerful CRM tool, but it has significant limitations that can hamper your sales operations.
Salesforce and Its Limitations
High Cost per User: Salesforce charges a premium for each user, with no option for 'lite' users. This can quickly add up, especially for large teams. Even users who only need limited access must pay for full licenses, which increases costs unnecessarily.
Specialized Expertise Required: To fully leverage Salesforce's capabilities, you often need to know its proprietary languages, like Apex. This requires specialized expertise and training, which can be a barrier for teams without dedicated Salesforce developers.
Limited Querying Abilities: Salesforce Object Query Language (SOQL) has its limitations. Unlike SQL, SOQL lacks flexibility and makes complex data retrieval tasks cumbersome. This can hinder your ability to generate comprehensive reports and insights.
Recognizing the drawbacks of Salesforce paves the way for exploring how Retool can revolutionize your sales app development.
Why Build a Sales App on Retool?
Retool offers a plethora of advantages that make it an ideal platform for building sales apps:
Cost Efficiency: By leveraging Retool, you can avoid the unnecessary costs associated with Salesforce users. With Retool, you only need one Salesforce user account to access the data, while the rest of your team can use the app you build without needing additional Salesforce licenses. This significantly reduces costs, especially for large teams.
Enhanced Data Visibility: Retool provides a more flexible and comprehensive view of your sales data, allowing for better control and visibility. You can create custom dashboards and reports that provide real-time insights into your sales activities.
Seamless Integration: Retool integrates effortlessly with various data sources, enabling you to streamline your workflow and connect all necessary tools and databases. This means you can combine Salesforce data with other data sources, such as your ERP or marketing systems, to get a holistic view of your operations.
Also Read: Building Apps with Retool Embed
With these compelling benefits in mind, let's dive deeper into how Retool, combined with Sequin, can optimize your sales app.
What is Sequin?
Sequin is a powerful tool that acts as a bridge between Salesforce and Retool. It ensures that your Salesforce data is continuously synced with your Postgres database, providing real-time updates and avoiding the limitations of Salesforce's API constraints.
Benefits of Using Sequin:
Real-Time Sync: Sequin sets up a persistent, real-time sync that helps you avoid Salesforce’s rate limits and API constraints. This ensures that your data is always up-to-date and accessible.
Simplified Operations: By using Sequin, you eliminate the need for background jobs, cache invalidation, and data sync issues. Sequin handles these tasks automatically, making your data management process more efficient and reliable.
Improved Data Control: Sequin allows you to manage and access your data more flexibly. You can use SQL to query your Salesforce data, bypassing the limitations imposed by Salesforce’s native querying capabilities.
Now that you understand the value of Sequin, let's explore how to set up this powerful trio—Salesforce, Sequin, and Retool.
Syncing Salesforce with Postgres Using Sequi
To get started with Sequin, follow these detailed steps:
Step 1: Sign Up for a Sequin Account
Visit Sequin's Website: Open your web browser and go to Sequin's website.
Create an Account: Click on the "Sign Up" or "Get Started" button. You'll be prompted to enter your email address and create a password. Fill in the required details and submit the form.
Verify Your Email: Check your email inbox for a verification email from Sequin. Click on the verification link to activate your account.
Access Sequin Dashboard: Once your email is verified, log in to Sequin using your credentials. You will be redirected to the Sequin dashboard, where you can manage your syncs and configurations.
Step 2: Configure Sync Between Salesforce and Postgres
Connect Salesforce Account:
In the Sequin dashboard, find and click on the "Connect New Source" button.
Select "Salesforce" from the list of available data sources.
You will be redirected to Salesforce's login page. Enter your Salesforce credentials and authorize Sequin to access your Salesforce data.
Connect Postgres Database:
After connecting your Salesforce account, you need to connect your Postgres database.
Click on "Connect New Destination" and select "Postgres."
Enter your Postgres database credentials, including the host, port, database name, username, and password. These credentials are typically provided by your database administrator.
Set Up Sync Rules:
Once both Salesforce and Postgres are connected, you need to configure the sync rules.
Select the Salesforce objects you want to sync with Postgres. Common objects include Leads, Accounts, Opportunities, Contacts, etc.
Specify the sync frequency (e.g., real-time, every 5 minutes, hourly) based on your data update needs.
Define any custom mappings or transformations required for your data. For example, you may want to map Salesforce fields to specific columns in your Postgres database.
Initiate the Sync:
Review your sync settings and click on the "Start Sync" button.
Sequin will begin the initial sync process, which may take some time, depending on the volume of data. You can monitor the progress on the Sequin dashboard.
Step 3: Monitor Sync Status
Access Sync Status:
In the Sequin dashboard, navigate to the "Syncs" section.
Here, you will see a list of all active syncs along with their current status (e.g., syncing, completed, failed).
Real-Time Monitoring:
Sequin provides real-time monitoring of your sync status. Check that your data is being updated as expected. The dashboard will display the last sync time and the number of records synced.
If there are any issues, Sequin will provide detailed error messages and logs to help you troubleshoot.
Troubleshooting:
If a sync fails, click on the specific sync to view the error details. Common issues might include authentication errors, data type mismatches, or network connectivity problems.
Follow the provided instructions to resolve the issues. You may need to reconfigure your sync settings or update your database schema to match Salesforce data types.
Alerts and Notifications:
Set up alerts and notifications to be informed of any sync issues or updates. This can be done in the Sequin dashboard settings, where you can choose to receive email alerts for sync failures or completions.
By following these steps, you can ensure that your Salesforce data is continuously and accurately synced with your Postgres database, allowing you to build powerful and data-driven sales applications with Retool.
With your data now synced, the next step is to set up Retool for building your sales app.
Setting Up Retool
Setting up Retool involves a few detailed steps to ensure seamless integration with your Postgres database and the synced Salesforce data. Here's a step-by-step guide:
1. Create a New Resource:
Navigate to the Resources Tab: Open Retool and go to the 'Resources' tab located on the left-hand sidebar.
Select 'Create new': Click on the 'Create new' button to start setting up a new resource.
Choose Postgres: From the list of available resources, select 'Postgres.' This option allows you to connect Retool to your Postgres database, where your Salesforce data is synced.
Enter Sequin Database Credentials: You will need to enter the database credentials provided by Sequin. These typically include:
Host: The server address where your Postgres database is hosted.
Port: The port number for your Postgres server, usually 5432.
Database Name: The name of your Postgres database.
Username: Your database username.
Password: Your database password.
Example:yamlHost: your-postgres-host.sequin.io
Port: 5432
Database Name: your_database_name
Username: your_username
Password: your_password
Ensure all the details are entered correctly to establish a successful connection.
2. Test the Connection:
Test the Connection: After entering the database credentials, click on the 'Test' button to verify the connection. Retool will attempt to connect to your Postgres database using the provided details.
Verify Connection Success: If the connection is successful, you will see a confirmation message indicating that Retool has connected to your Postgres database. If there are any errors, double-check the credentials and try again.
Testing the connection is crucial to ensure that the Retool can access your Salesforce data through the synced Postgres database. It helps identify any issues with the connection setup before you proceed further.
3. Name Your App:
Create and Name the App Interface: Once the connection is verified, proceed to create a new app in Retool. Click on 'Create New App' to start the process.
Provide a Clear and Descriptive Name: Give your app a name that reflects its purpose, such as "Sales Dashboard" or "Lead Management." A clear and descriptive name helps users understand the app's functionality at a glance and sets the context for its use.
Example:
yaml
App Name: Sales Dashboard
Save the App: After naming your app, save the changes. Your app is now set up and ready for you to start building its core functionality.
With these steps completed, Retool is now configured and connected to your Postgres database containing the synced Salesforce data. You can build your sales app's core functionality, such as creating tables, forms, and interactive components to manage and analyze your sales data effectively.
Also Read: Guide to Retool's Pricing Tiers and Packages
Building Core Functionality
Creating a searchable table for new leads is the foundation of your sales app. Here’s how to do it:
1. Drag-and-Drop Components
Retool's intuitive drag-and-drop interface allows you to build complex layouts without writing any code. Here’s how to get started:
Open Retool: Log in to your Retool account and open your workspace.
Create a New App: Click on "Create new" to start a new app project.
Add a Table Component: From the components panel on the right side, drag a table component onto your canvas. This table will be used to display the leads.
This user-friendly interface makes it easy to quickly set up the structure of your app.
2. Connect to Data Source
To link the table component to your Postgres database:
Select the Table Component: Click on the table component you just added to your workspace.
Connect to Postgres: In the right-hand properties panel, find the "Data" section. Click on the drop-down menu and select your Postgres database connection. If you haven't connected Retool to your Postgres database yet, you'll need to set this up by providing your database credentials (host, port, database name, username, and password).
Choose the Data Source: Once connected, select the specific table you want to display data from, such as "leads." This step ensures that the table component retrieves data from your Salesforce leads table synced to Postgres.
3. Write SQL Queries
Use SQL queries to retrieve and display data from your Postgres database. Here’s how:
Open the Query Editor: In the right-hand properties panel, click on the "Edit" button next to the "Data" field to open the query editor.
Write Your Query: Enter an SQL query to fetch the data you need. For example:sqlSELECT * FROM leads WHERE status = 'New'
This query fetches all new leads from your database, displaying them in your table.
Test the Query: Click on the "Run" button to test your query and ensure it returns the expected results. Make any necessary adjustments to the query to get the desired data.
You can customize the query to include additional fields or apply filters based on your requirements.
4. Customize Table Columns
Adjust the table columns to display relevant information and improve usability:
Select the Table Component: Click on the table component to bring up its properties panel.
Edit Columns: In the properties panel, find the "Columns" section. Here you can:
Hide Unnecessary Columns: Click on the eye icon next to any columns you want to hide. For example, internal IDs or timestamps that aren't relevant to your users.
Reorder Columns: Drag and drop columns to reorder them. Prioritize important information like the lead name, company, contact information, and status.
Format Columns: Click on a column name to open its settings. You can change the column type, add custom formatting, and set default values. For instance, you might want to format the "status" column with color coding to make it easier to distinguish between different statuses.
Customizing the table columns improves the readability and usability of your table, making it easier for users to find and understand the information they need.
With your table now set up, you have a solid foundation for your sales app. Next, let's add some advanced features to enhance its functionality.
Adding Search and Filtering Features
Enhance your app by implementing search and filtering features to make it more interactive and user-friendly. Here’s how to add search functionality and filtering options step by step:
Search Functionality
Add a Search Input Field:
Drag and drop an input component (like a text input box) onto your Retool interface.
Name this input field appropriately, such as searchInput.
Create a Dynamic SQL Query:
Use the searchInput value to dynamically build your SQL query. This query will filter leads based on the user's input.
This query uses the ILIKE operator for case-insensitive search and filters leads whose names contain the user-provided input.
Example JavaScript code to build the query:javascriptconst searchQuery = `SELECT * FROM leads WHERE name ILIKE '%${searchInput.value}%'`;
Bind the Query to the Table:
Set the table’s data source to the dynamic query. This way, the table updates automatically based on the search input.
Go to the table component’s settings and bind its data source to the searchQuery variable.
Add an Event Listener:
Ensure the table refreshes whenever the user types into the search input. Add an event listener to the search input to trigger the query when its value changes.
Example setup:javascriptsearchInput.on('input', function() {
tableData.setDataSource(searchQuery);
});
Filtering Options
Add Dropdown Menus for Filtering:
Drag and drop a drop-down component onto your Retool interface. This will be used to filter leads by status.
Populate the drop-down with the filter options, such as "New," "Contacted," and "Qualified."
Name this drop-down field appropriately, such as statusFilter.
Create a Dynamic SQL Query for Filtering:
Use the statusFilter value to dynamically build your SQL query. This query will filter leads based on their status.
This query filters the leads to show only those with the selected status.
Example JavaScript code to build the query:javascriptconst filterQuery = `SELECT * FROM leads WHERE status = '${statusFilter.value}'`;
Bind the Query to the Table:
Set the table’s data source to the dynamic query created for filtering.
Go to the table component’s settings and bind its data source to the filterQuery variable.
Add an Event Listener:
Ensure the table refreshes whenever the user selects a different filter option. Add an event listener to the drop-down to trigger the query when its value changes.
Example setup:javascriptstatusFilter.on('change', function() {
tableData.setDataSource(filterQuery);
});
Dynamic Query Building
Combine Search and Filter Queries:
You can create a more complex query that incorporates both search and filter criteria.
Example JavaScript code to build the combined query:javascriptconst combinedQuery = `SELECT * FROM leads WHERE name ILIKE '%${searchInput.value}%' AND status = '${statusFilter.value}'`;
Bind the Combined Query to the Table:
Set the table’s data source to the combined query.
Go to the table component’s settings and bind its data source to the combinedQuery variable.
Update Event Listeners:
Ensure the table refreshes whenever either the search input or the filter dropdown changes.
Example setup:javascriptsearchInput.on('input', function() {
tableData.setDataSource(combinedQuery);
});
statusFilter.on('change', function() {
tableData.setDataSource(combinedQuery);
});
With these search and filtering features in place, your app becomes more interactive and user-friendly, allowing users to easily find and filter leads based on their criteria. These dynamic capabilities significantly enhance the usability and functionality of your sales app.
Enhancing User Interface
Polishing your table’s interface is crucial to improving the user experience. Here’s how you can achieve an enhanced UI in detail:
Clean Up Columns
Identify Unnecessary Columns: Review the columns in your table and determine which ones are not essential for the end user. Internal IDs, timestamps, and other metadata might be useful for backend processes but are often irrelevant for the daily use of sales representatives.
Hide Unnecessary Columns:
Retool Interface: In the Retool editor, click on the table component.
Columns Settings: Navigate to the “Columns” section in the settings panel.
Visibility Toggle: Toggle the visibility switch for each column you want to hide. For instance, hide columns like id, created_at, and updated_at.
Reorder Columns for Clarity:
Drag and Drop: Drag columns to reorder them so that the most important information is displayed first. For example, place columns like name, company, and status at the beginning.
Width Adjustment: Adjust the width of each column to ensure that important information is fully visible without needing to scroll.
Rename Columns (Optional):
Alias Names: Rename columns to user-friendly names. For example, change company_name to Company and lead_status to Status.
Configure Status Column
Add Color Coding to Statuses:
Conditional Formatting: In the table settings, go to the “Conditional Formatting” section.
Add Rule: Create rules for the status column to apply different colors based on the status value.
Example Rules:
Qualified: Set the background color to green.
Contacted: Set the background color to yellow.
New: Set the background color to red.
Use Icons for Statuses (Optional):
Custom Renderer: Use a custom renderer to display icons next to the status text.
JavaScript Renderer:const status = {{status}};
if (status === 'Qualified') {
return `<span style="color: green;">✔️ Qualified</span>`;
} else if (status === 'Contacted') {
return `<span style="color: yellow;">📞 Contacted</span>`;
} else if (status === 'New') {
return `<span style="color: red;">🆕 New</span>`;
}
return status;
Test the Configuration:
Preview: Switch to the preview mode in Retool and verify that the status column displays the correct colors and icons. Adjust the rules if necessary to ensure clarity and consistency.
Add Tooltips
Enable Tooltips in Retool:
Tooltip Configuration: In the table component settings, find the option to enable tooltips for specific columns.
Configure Tooltip Content:
Additional Information: Choose columns that contain supplementary information, such as notes or last_contact_date.
Tooltip Text:
Example: For the notes column, you might configure a tooltip to show the text content when a user hovers over a cell.
JavaScript Example:{{notes}} // Display the notes text as a tooltip
Test and Adjust Tooltips:
User Testing: Hover over the configured columns to ensure the tooltips display correctly. Adjust the text or the configuration to ensure it provides clear and helpful information without cluttering the interface.
Additional Enhancements:
Custom HTML: For more complex tooltips, consider using custom HTML and CSS to format the tooltip content. This can include images, links, or styled text to make the information more engaging.
By following these steps, you can significantly enhance the user interface of your Retool sales app, making it more intuitive and user-friendly for your sales team. Improved clarity and usability will help your team focus on what matters most, driving better engagement and efficiency in their daily tasks.
Building Lead Detail Section
Designing a detailed lead view provides comprehensive information about each lead and enables efficient management of lead details. Follow these steps to create an effective lead detail section:
Create Detail Form
Drag-and-Drop Components:
Open your Retool app editor.
Drag a Container component onto your workspace. This container will hold all the detail fields for a lead.
Inside the container, drag the following components:
Avatar: To display the lead's profile picture.
Text Inputs: For fields like name, company, contact information, status, and notes.
Buttons: For saving and editing the lead details.
Arrange Components:
Arrange the text input fields logically. For example, place the Name field at the top, followed by Company, Contact Information, Status, and Notes.
Place the Avatar component at the top left or right corner of the container for visual appeal.
Position the Save and Edit buttons at the bottom of the container.
Label Components:
Ensure each text input has a corresponding label to indicate what information is expected. For instance, label the first input as Name, the second as Company, and so on.
Bind Data to Form Fields
To ensure that the form displays the correct lead details when a lead is selected, follow these steps:
SQL Query for Selected Lead:
Create a query to retrieve details of the selected lead based on its ID. This query will fetch data from the Postgres database.
javascriptconst selectedLeadQuery = `SELECT * FROM leads WHERE id = {{selectedLeadId}}`;
The selectedLeadId variable should be dynamically set based on the lead selected from the leads table.
Bind Query Results to Form:
Go to each text input field and bind it to the results of the selectedLeadQuery.
For the Name input field, set its value to {{selectedLeadQuery.data.name}}.
For the Company input field, set its value to {{selectedLeadQuery.data.company}}.
Repeat this process for other fields such as contact information, status, and notes.
Automatic Population:
Ensure that when a user selects a lead from the table, the selectedLeadId is updated, triggering the selectedLeadQuery to run and populate the form fields with the lead's details.
Also Read: Quickstart for Retool Database
Add Edit and Save Buttons
Edit Button:
Drag a Button component onto your workspace and label it Edit.
Configure the button to enable editing of the form fields. This can be done by setting the form fields to be editable when the Edit button is clicked.
Save Button:
Drag another Button component and label it Save.
Write a SQL query to update the lead details in the database. The query should take the values from the form inputs and update the corresponding lead record.
javascriptconst updateLeadQuery = `
UPDATE leads
SET name = '{{nameInput.value}}',
company = '{{companyInput.value}}',
status = '{{statusInput.value}}',
notes = '{{notesInput.value}}'
WHERE id = {{selectedLeadId}}
`;
Bind the Save button to this query so that when the button is clicked, the lead's information is updated in the database.
Refresh Data:
After the update query runs, ensure that the data in the table and form is refreshed to reflect the latest changes. This can be achieved by re-running the query that populates the table and form fields.
To further streamline your workflow, let’s add quick research links.
Adding Quick Research Links
Enhance the lead detail view by adding buttons for quick research links:
LinkedIn Button:
Drag a Button component and label it LinkedIn.
Configure the button to open a LinkedIn search for the lead. Use the lead's name or company to create the search URL.
Set the button's action to open this URL in a new tab.
javascriptconst linkedInUrl = `https://www.linkedin.com/search/results/all/?keywords={{selectedLeadQuery.data.name}}`;
Crunchbase Button:
Drag another Button component and label it Crunchbase.
Configure the button to open a Crunchbase search for the lead.
Set the button's action to open this URL in a new tab.
javascriptconst crunchbaseUrl = `https://www.crunchbase.com/search/people?q={{selectedLeadQuery.data.name}}`;
Company Website Button:
Drag a Button component and label it Company Website.
Use the lead's company name to create a Google search URL for the company website.
Set the button's action to open this URL in a new tab.
javascriptconst companyWebsiteUrl = `https://www.google.com/search?q={{selectedLeadQuery.data.company}} website`;
By following these steps, you create a comprehensive lead detail view that allows users to easily view, edit, and update lead information while providing quick access to external research tools.
Updating Lead Details
Ensuring data accuracy is crucial for effective sales management. By allowing users to update lead details directly within your Retool app, you can keep your Salesforce data up-to-
date without hassle. Here’s how to implement this functionality step-by-step:
SQL Query for Updates
Create Update Form:
Start by adding form components (text inputs, dropdowns, etc.) to capture the details you want to update, such as lead status and notes.
Bind Form Inputs:
Bind the form inputs to the selected lead's data. This can be done using Retool's data binding features to ensure the form displays the current details of the selected lead.
Create SQL Query:
Write an SQL query to update the lead's information in your Postgres database. This query will use the values from the form inputs.
sqlUPDATE leads SET status = '{{ statusInput.value }}', notes = '{{ notesInput.value }}' WHERE id = '{{ selectedLead.id }}'
This query updates the status and notes fields for the lead with the specified id.
Test the Query:
Ensure the query works as expected by running it with sample data. Verify that the lead's details are updated in the database.
Event Handler
Create Save Button:
Add a button to your form, labeled "Save" or "Update." This button will trigger the update process.
Set Up Event Handler:
Configure an event handler for the save button to run the SQL query when clicked. In Retool, you can set this up under the button's onClick property.
Here, updateLeadQuery is the name of your SQL query, and retool.updateData() refreshes the data displayed in your app.
javascriptsaveButton.onClick = async () => {
await retool.runQuery('updateLeadQuery');
retool.updateData();
}
Refresh Data:
After the query runs, the event handler refreshes the data in your app to reflect the updated lead details. This ensures real-time accuracy and immediate visibility of changes.
Full Implementation Example
Create the Form:
Add text input fields for status and notes, and bind them to the selected lead's data.
javascript<TextInput id="statusInput" value="{{ selectedLead.status }}" />
<TextInput id="notesInput" value="{{ selectedLead.notes }}" />
SQL Query:
Ensure your query uses the correct data bindings.
SqlUPDATE leads SET status = '{{ statusInput.value }}', notes = '{{ notesInput.value }}' WHERE id = '{{ selectedLead.id }}'
Save Button Event Handler:
Configure the button to run the query and refresh the data.
javascript<Button id="saveButton" onClick={async () => {
await retool.runQuery('updateLeadQuery');
retool.updateData();
}}>Save</Button>
By following these steps, you enable users to update lead details directly within your Retool app, ensuring your Salesforce data remains accurate and up-to-date.
Bulk Editing Lead Statuses
Simplify bulk updates with these steps:
Editable Lead Status Column
Enable In-Line Editing: In Retool, go to the table component that displays your leads. To make the status column editable directly in the table, you need to enable in-line editing. This feature allows users to change the status of multiple leads without opening each lead's detail view.
Select the table component.
In the table settings panel, find the column for the lead status.
Enable the "Editable" option for the status column. This allows users to click on the cell and edit the status directly.
Configure Editable Fields: Ensure that the status column only allows valid status values. You might want to use a dropdown or a set of predefined options for the status field to maintain data integrity.
In the column settings, change the input type to a dropdown.
Define the available status options (e.g., New, Contacted, Qualified, etc.).
Test In-Line Editing: After configuring the status column, test the in-line editing functionality to ensure it works as expected. Click on the status cell in the table, change the value, and verify that the change is saved.
Bulk Update Query
Add Checkboxes for Selection: To perform bulk updates, you need a way for users to select multiple leads. Add checkboxes to each row of the table.
In the table settings panel, add a new column at the beginning of the table.
Set the column type to "Checkbox."
Ensure that each checkbox is linked to the corresponding row's data.
Track Selected Rows: Use JavaScript to keep track of the IDs of the selected leads. Create a variable to store the selected lead IDs.
javascriptconst selectedLeadIds = table1.selectedRowIndices.map(index => table1.data[index].id);
Create Bulk Update Button: Add a button to trigger the bulk update action.
Drag a button component onto your Retool app interface.
Label the button appropriately, such as "Update Lead Status."
Bind Bulk Update Action: Link the button to a JavaScript function that performs the bulk update. When clicked, the button should execute a SQL query to update the statuses of the selected leads.javascriptconst bulkStatusInput = 'New Status'; // Replace with the actual input field value
const bulkUpdateQuery = `
UPDATE leads
SET status = '${bulkStatusInput}'
WHERE id IN (${selectedLeadIds.join(',')})
`;
// Execute the query
retool.executeQuery({
query: bulkUpdateQuery,
onSuccess: () => {
// Refresh data after update
retool.refreshData();
},
onError: (error) => {
console.error('Error updating lead statuses:', error);
}
});
Test Bulk Update Functionality: After configuring the bulk update button, test the functionality to ensure it works correctly. Select multiple leads using the checkboxes, choose the new status, and click the update button. Verify that the statuses of the selected leads are updated in the database.
Finally, let’s add some finishing touches to make your app stand out.
Final Touches
Polish your app with these enhancements to make it more user-friendly and visually appealing:
Icons and Colors
Adding icons and colors can significantly improve the visual appeal and usability of your app. Here’s how to implement them effectively:
Choose a Color Scheme:
Select a consistent color scheme that aligns with your brand. Use colors to differentiate various statuses and priorities.
For example, use green for qualified leads, yellow for contacted leads, and red for new leads.
Add Icons:
Use icons to represent different lead statuses or actions. Icons can provide a quick visual cue for users.
To add an icon in Retool:
Drag an "Icon" component from the component library onto your workspace.
Select the icon type from the icon library (e.g., checkmark for qualified, phone for contacts, and flag for new leads).
Position the icon next to the relevant data in your table or detail view.
Color Coding:
Apply color coding to rows or specific cells in your table based on lead status.
Bind the background color property of a cell or row to the result of this function.
Use conditional formatting in SQL queries or JavaScript to dynamically assign colors.javascript// Example of applying color based on status
const statusColor = {
'Qualified': 'green',
'Contacted': 'yellow',
'New': 'red'
};
return statusColor[row.status];
Highlight Key Information:
Use bold fonts, borders, or background colors to highlight important information, such as lead names or high-priority leads.
Adjust these settings in the properties panel of the relevant components.
User Interaction
Improving user interaction ensures that your app is intuitive and easy to use. Here are some tips to enhance user interaction:
Button Labeling:
Clearly label all buttons with descriptive text that indicates their function (e.g., "Save Lead," "Update Status," "Delete Lead").
To label a button in Retool:
Drag a "Button" component onto your workspace.
Enter the button label in the properties panel.
Visual Feedback:
Provide visual feedback when buttons are clicked or actions are performed. This can include changing the button color, showing a loading spinner, or displaying a success message.
Use Retool's event handlers to change button states:javascriptbutton.onClick(() => {
button.setLoading(true);
// Perform action
button.setLoading(false);
alert('Action completed successfully!');
});
Input Field Enhancements:
Ensure all input fields are clearly labeled and have placeholder text to guide users as to what information is required.
Use input validation to prevent incorrect data entry. Display error messages when validation fails.javascriptif (!emailInput.value.includes('@')) {
emailInput.setError('Please enter a valid email address.');
}
Tooltips and Help Text:
Add tooltips to buttons and input fields to provide additional guidance. This helps users understand the functionality without cluttering the interface.
To add a tooltip in Retool:
Select the component.
Enter the tooltip text in the "Tooltip" field in the properties panel.
Responsive Design
Ensuring that your app is responsive allows users to access it on various devices, including desktops, tablets, and smartphones. Follow these steps to make your app responsive:
Flexible Layouts:
Use Retool’s layout components, like containers, grids, and flexboxes to create flexible and adaptive layouts.
To create a responsive grid:
Drag a "Container" or "Grid" component onto your workspace.
Set the container to use flexbox or grid layout.
Adjust the properties to specify how components should resize and rearrange on different screen sizes.
Media Queries:
Use CSS media queries to apply different styles based on the screen size. This allows you to adjust font sizes, margins, and padding for smaller screens.css@media (max-width: 600px) {
.table {
font-size: 12px;
}
}
Test Across Devices:
Regularly test your app on various devices and screen sizes to ensure that it looks and functions well. Use browser developer tools to simulate different screen sizes.
Adjust component sizes and positions as needed to ensure a seamless experience across all devices.
Mobile-Friendly Adjustments:
For mobile views, simplify the interface by hiding less critical information and using collapsible sections.
Ensure buttons and touch targets are large enough to be easily tapped on a touchscreen device.
By following these steps, you can enhance the visual appeal, usability, and responsiveness of your sales app, ensuring a smooth and engaging user experience.
Conclusion
Building a sales app with Retool and Salesforce enhances your sales operations and provides a cost-effective solution to Salesforce's limitations. Leveraging Sequin ensures real-time data synchronization, avoiding rate limits and API constraints. This integration creates a dynamic and responsive sales management system tailored to your needs.
Your custom sales app empowers your team with better data visibility, an enhanced user experience, and seamless integration with various data sources. This holistic approach drives efficiency and productivity in your business.
Consider partnering with Toolpioneers. We have extensive experience developing over 100 custom applications using Retool. We ensure that we provide tailored solutions that meet your company's needs. Discover how Toolpioneers can empower your organization to drive results and adapt seamlessly as your business evolves. Connect today!