A Guide for Building Interactive and Engaging User Experiences

Welcome to Corteza. Creating customized, interactive pages is central to designing an engaging user experience, and Corteza’s flexible interface empowers you to build pages that meet your unique needs with ease. This guide will walk you through everything you need to know to bring your ideas to life – from setting up a new page to adding dynamic elements like charts, calendars, and navigation buttons.

Getting Started: Accessing the Pages Section in the Admin Panel

To start building your customized pages, navigate to the Admin Panel and click on Pages. This area is the control center for managing all your pages, where you can browse, organize, and reorder them with a simple drag-and-drop function. This intuitive layout allows you to quickly set up or modify pages, keeping everything in one streamlined location.

Creating a New Page

Creating a new page in Corteza is as easy as it is powerful:

1. Start with a Name: Give your page a memorable name that conveys its purpose, then click Create Page.
2. Add the Details: Take advantage of additional options – add a description, select an icon to represent the page, control its visibility, and choose from various layouts to set the groundwork for a visually appealing and organized page.
3. Save and Open the Page Builder: After saving your new page, click on Page Builder to dive into the main workspace. Here, you’ll see a blank canvas, just waiting for you to start adding blocks that bring the page to life.

Adding Blocks: Building Your Page with Interactive Elements

Now the fun begins! Blocks are the building blocks (pun intended) of your page, each adding specific functionality and making the user experience more dynamic. Let’s explore the types of blocks you can add to your page.

1. Record List Block: Display Key Data at a Glance

A Record List Block allows you to display information in an organized list, offering an ideal way to showcase data pulled directly from a chosen module.

• Add and Name the Block: Start by selecting Add Page Block, then choose Record List and give it a descriptive name.
• Choose Your Data Source and Fields: Pick the module you want the list to draw from and select fields to display by clicking the eye icon. This flexibility means you can tailor the list to show exactly the information users need.
• Customization Options: Rearrange fields, allow users to control which fields they see, and apply pre-filters. You can even enable advanced options to create a truly personalized experience for your users.

2. Calendar Block: Perfect for Scheduling and Events

The Calendar Block is a powerful tool for showcasing schedules, events, or deadlines in a visually engaging format.

• Configure Views: Add a name for the calendar block, select the default calendar views, and make any other adjustments to align with your goals.
• Select Event Sources and Colors: Choose an event source and select a color to give your calendar a cohesive and user-friendly look.
• Add, Resize, and Arrange: Place the block on your page, then adjust its size and position to ensure it’s easy to find and use.

3. Chart Block: Visualize Your Data in Seconds

For clear, visual insights, the Chart Block is a versatile choice.

• Choose a Chart: Select the chart type from a dropdown list, whether it’s a bar chart, line graph, or pie chart, to suit the data you’re showcasing.
• Enable Drill-Down: Let users dive deeper into the data with a drill-down feature that brings up a record list from the chart, enhancing their experience.
• Position and Size: Add the chart to your page, then adjust its size and location to seamlessly integrate it into the layout.

4. Content Block: Add Text and Instructions

If you need to add instructions, context, or information, the Content Block is your go-to. It’s straightforward yet powerful:

• Enter and Format Text: Type out the text, apply formatting options, and add it to your page. This block is perfect for guiding users or offering explanations right where they’re needed.

5. File Upload Block: Easy Document and Image Access

A File Upload Block makes it easy for users to access documents or images right from the page.

• Upload Files: With this block, you can upload files that users need to access quickly, whether they’re PDFs, images, or any other file type relevant to the page’s purpose.

6. iFrame Block: Embed External Content Seamlessly

An iFrame Block opens up possibilities for embedding external websites or content.

• Add a URL: Simply enter the URL you want to display on the page, making it easy to bring in outside resources or partner sites directly within your page layout.

7. Metric Block: Display Key Metrics with Style

Use the Metric Block to showcase statistics, KPIs, or data insights in a clean, visual format.

• Select and Customize: Choose a module as the data source, configure options like prefix, suffix, and color, and add a custom label to give context to the displayed metric.
• Add Advanced Filtering: Allow users to view data that’s most relevant to them with pre-filters, creating a more interactive experience.

8. Progress Bar Block: Show Real-Time Progress

The Progress Bar Block allows you to monitor and display ongoing progress.

• Select a Field: Choose the module and the field representing progress. This block is ideal for tracking goals or project milestones in a visually engaging way.

9. Map Block: Bring Location-Based Data to Life

For any geographic data, the Map Block can help visualize location-based information.

• Choose Area and Source: Zoom into the desired location and choose a source module. Once added, users can view interactive maps directly within the page.

10. Tabs Block: Organize with Interactive Tabs

Organize related content with the Tabs Block, giving your page a cleaner and more accessible design.

• Add Tabs and Blocks: Select blocks to add to each tab, assign names, and set the order of the tabs by dragging and dropping.
• Select Tab Style: Pick a style that complements your layout, giving users a familiar, easy-to-navigate interface.

11. Navigation Block: Add Menu-Style Navigation for Quick Access

Guide users seamlessly between pages with the Navigation Block.

• Set Up Navigation Links: Add app pages or URLs, and style buttons with custom text and background colors.
• Arrange for Accessibility: Organize navigation buttons across your page for easy access, making your page both beautiful and functional.

Wrapping Up: Finalizing and Viewing Your Page

Once you’ve added and arranged all your blocks, it’s time to bring everything together. Save your page and click View Page to preview it exactly as your users will see it. Now, you’re ready to roll out a thoughtfully designed, interactive page that makes user engagement effortless and enjoyable.

By following these steps, you can create dynamic, informative, and engaging pages in Corteza, transforming how users interact with your data and tools.