top of page
Logo of top retool developers and retool agency

Building a Retool Portals App

Creating a Retool portal tailored for various user roles is a powerful way to streamline your business operations and enhance productivity. This guide, specifically designed for users on Business or Enterprise plans, including those participating in the Beta program, is here to help you understand the purpose and benefits of setting up such a portal. By following this guide, as a user of these plans and in the Beta program, you can leverage Retool’s advanced features to build a robust and efficient portal that meets your organization's diverse needs.


Prerequisites


Retool Portals App

Before you begin setting up your Retool portal, ensure that you meet the following prerequisites:

  1. Subscription Requirement: You need a Business plan subscription or higher. These plans offer the advanced features and capabilities required to create and manage a portal for various user roles. For more details on the different plans and features, visit Retool's pricing page.

  2. Admin User Login: To commence the setup process, you must have an admin user login. The admin user has the necessary permissions to configure settings, manage user roles, and integrate data sources. Ensure you have administrative access to utilize Retool’s capabilities to build your portal fully.


By meeting these prerequisites, you will be well-prepared to create a versatile and functional Retool portal that caters to the needs of different user roles within your organization. For more information, refer to the official documentation on Retool's website.


The following section will guide you on setting up your organization in the Retool portal.


Setting up Your Organization


Setting up your organization in Retool allows you to create a cohesive and branded user experience. Here’s how you can customize and optimize your Retool setup:


1. Options for Branding and Customization

  • Organization Name: Set your organization's name to personalize your portal and minimize Retool branding.

  • Domain Name: Choose a custom domain name to provide a seamless and professional user experience.

  • Logo and Favicon: Upload your company’s logo and favicon to reinforce your brand identity across the portal.

  • Color Themes: Customize the color themes to match your brand’s colors, creating a consistent look and feel.


2. Adding Your Organization Name

To add your organization name and reduce Retool branding:

  • Navigate to the Settings tab in your Retool dashboard.

  • Select Organization Settings.

  • Enter your organization's name in the designated field.

  • Save your changes to apply the new name across your portal.


3. Adding a Custom Domain

For both cloud and self-hosted instances, you can add a custom domain to your Retool portal:

  • Cloud Instances:

  • Go to Settings and select Custom Domain.

  • Enter your desired domain name and follow the instructions to verify ownership and configure DNS settings.

  • Self-Hosted Instances:

  • Access your Retool instance's configuration file.

  • Update the RETOOL_CUSTOM_DOMAIN environment variable with your desired domain.

  • Restart your Retool instance to apply the changes.


For detailed instructions, refer to the Retool documentation.


4. Integration of Intercom for Enhanced End-User Support

To integrate Intercom for enhanced user support:

  • Go to Settings and select Integrations.

  • Find and select Intercom from the list of available integrations.

  • Follow the prompts to connect your Intercom account and configure the integration. This setup lets you provide real-time support and engage with your users directly within your Retool portal.


5. Customization of User Interface Elements

You can customize various user interface elements to align with your branding:

  • Login and Password Reset Pages:

  • Navigate to Settings and select User Interface.

  • Customize the appearance and content of the login and password reset pages.

  • Save your changes to apply the customizations.

  • Email Templates:

  • Go to Settings and select Email Templates.

  • Edit the templates for account-related emails such as welcome messages, password resets, and notifications.

  • Use your branding elements and messaging style to customize these emails.


For more detailed guidance, visit the Retool documentation.

Following these steps, you can customize your Retool organization effectively, ensuring a branded and user-friendly experience. With options for branding, custom domains, integrations, and UI customization, Retool provides the flexibility to tailor your portal to meet your specific needs and enhance user engagement. For comprehensive details and updates, always refer to Retool.



How do you build your homepage? Then, dive into the next section and learn comprehensively about the guidelines for creating your Retool portal homepage.


Building Your Home Page


retool portals

Your home page guides users through your Retool portal, providing a central hub from which they can access various features and applications. Here’s how to build an effective home page using Retool.


1. The Role of a Home Page

The home page serves as the entry point to your portal, offering users a clear overview of available resources and tools. It should be intuitive, easy to navigate, and tailored to meet the specific needs of different user roles.


2. Employing a Retool Application as the Portal Home Page

You can create a Retool application to function as your portal’s home page:

  • Create a New App: Create a new application in Retool that will act as your home page.

  • Design Layout: The layout should include navigation links, dashboards, and widgets relevant to your users.

  • Home Page Setup: Configure your organization settings to set this application as the portal's default landing page.


3. Dynamically Showing or Hiding Links Based on Users’ Permissions

Using Retool’s permissions features, you can control the visibility of links and content based on user roles:

  • User Groups: Define user groups with specific permissions in the Settings tab under Permissions.

  • Conditional Display: Use these permissions to show or hide links on your home page dynamically. It ensures that users see only content relevant to their roles.


4. JavaScript Snippet for Conditional Content Display

Here’s a JavaScript snippet to demonstrate how to conditionally display content for different user groups within your Retool application:


// Assuming you have a variable 'currentUserRole' that holds the user's role


const userRole = currentUserRole.value;


// Example elements to show/hide based on user role

const adminSection = document.getElementById('admin-section');

const userSection = document.getElementById('user-section');


// Show/Hide sections based on user role

if (userRole === 'admin') {

  adminSection.style.display = 'block';

  userSection.style.display = 'none';

} else {

  adminSection.style.display = 'none';

  userSection.style.display = 'block';

}


  • Usage in Retool: Integrate this snippet into your Retool application using the JavaScript section in the app settings. Adjust the IDs and roles based on your specific setup and user groups.


Creating an effective home page in your Retool portal is essential as it helps guide users and provides a customized experience. Using a Retool application as your home page, managing content dynamically based on user permissions, and using JavaScript for conditional displays, you can create a robust and user-friendly entry point for your portal. For more detailed guidance, please refer to the Retool documentation.


Move on to the next section and learn how to configure permissions for the Retool portal.


Configuring Permissions For Your Portal


Setting up permissions in your Retool portal ensures users have appropriate access levels, enhancing security and user experience. Here's how to configure permissions effectively:


1. Process for Creating Permission Groups Tailored to End-Users

  • Access Permissions Settings: Go to the Settings tab in your Retool dashboard and select Permissions.

  • Create New Groups: Click Create New Group to define user roles such as Admin, Editor, Viewer, etc.

  • Assign Permissions: Customize each group’s permissions

to control access to your portal's different applications, resources, and features.


2. Guidelines on Setting Restrictions Within These Groups

  • Define Access Levels: Set specific access levels for each permission group. For example, Admins might have full access, while Viewers have read-only permissions.

  • Resource Restrictions: Limit access to sensitive data and critical functionalities based on the user's role. Ensure that users only see and interact with resources relevant to their tasks.

  • Granular Controls: Retool’s granular permission settings allow you to control access at the field, action, or component level, providing a tailored experience for each user group.


3. The Significance of Managing the 'All Users' Default Permission Group and Its Settings

  • Default Group Settings: By default, the 'All Users' group includes everyone accessing your portal. Carefully manage this group to set baseline permissions.

  • Minimum Access: Ensure the 'All Users' group has the minimum necessary access to avoid unintentional exposure of sensitive information.

  • Custom Groups Override: Users can belong to multiple groups. Permissions from custom groups can override the default settings of the 'All Users' group, allowing for more specific control.


4. How to Specify a Landing Page That Users See Upon Login Based on Their Permissions

  • Dynamic Landing Pages: Configure dynamic landing pages that users see upon login based on their permissions.

  • Conditional Navigation: Use Retool’s conditional logic to set different landing pages for each permission group.

  • Setup Example:

  • Admin Users: Redirect to an admin dashboard.

  • Regular Users: Redirect to a user-specific homepage or dashboard.


Here’s a basic example of how to set up conditional navigation based on user roles:

const userRole = currentUserRole.value; // Assume currentUserRole is a variable holding the user's role


if (userRole === 'admin') {

  window.location.href = '/admin-dashboard';

} else if (userRole === 'editor') {

  window.location.href = '/editor-dashboard';

} else {

  window.location.href = '/user-dashboard';

}


Configuring permissions in your Retool portal ensures users access resources and features appropriately. By creating tailored permission groups, setting appropriate restrictions, managing the 'All Users' default group, and specifying landing pages based on user roles, you can provide a secure and personalized user experience.



Move on to the final part of this article and brush up on what you have learned so far on building your Retool portal.


Conclusion


Retools App

Setting up and personalizing your Retool portal involves several vital steps to ensure a smooth and efficient user experience:


  1. Defining Your App Idea and Objectives: Start by understanding your app's purpose, identifying your target audience, setting clear goals, and sketching your app idea.

  2. Choosing Between a Native App and a Progressive Web App (PWA): Consider factors like performance, cost, and user experience when deciding which type of app best suits your business needs.

  3. Selecting a Development Approach: Based on your budget, timeframe, and desired level of control, choose between in-house development, hiring an agency, or using an app builder like Retool.

  4. Building Your App: Focus on UI/UX design, add relevant features, and customize plugins or APIs to meet your business requirements.

  5. Testing Your App: Thoroughly test your app on various devices, gather feedback from beta testers, and perform technical optimizations.

  6. Publishing Your App on App Stores: Prepare for submission to app stores, navigate the review and approval process, and implement marketing strategies for a successful launch.

  7. Updating and Improving Your App: Continuously incorporate user feedback and analytics, introduce new features, and maintain regular updates to keep your app relevant.

  8. Keeping Up with Trends and Best Practices: Stay informed about the latest trends in app development, learn new programming languages, and utilize FAQs and resources for further guidance.

  9. Configuring Permissions For Your Portal: Create permission groups, set restrictions, manage the 'All Users' group, and specify landing pages based on user permissions.


Now that your portal setup, including organizational setup, user permissions, and homepage configuration, is complete, you can start building your main applications. With Retool, you have a powerful tool to streamline your development process and create robust, user-friendly apps.


Start building your applications with Retool now! Visit Retool.com to access comprehensive resources, tutorials, and support for creating powerful and customized apps that meet your business needs. 


Head to ToolPioneers today to discover expert resources and innovative solutions that can transform your operations. Become part of the community of pioneers and start your journey toward a more imaginative and efficient future with results.

Comments


bottom of page