Blog

<p data-sourcepos="3:1-3:231"><span>For years, businesses have been stuck between two extremes when needing new software: custom development, which can be expensive and time-consuming, or off-the-shelf solutions, which often lack the specific functionality required.</span></p><p data-sourcepos="5:1-5:9"><span>Low-code/no-code (LC/NC) development platforms offer a tempting middle ground. By using drag-and-drop interfaces and pre-built components, these platforms allow businesses to create custom applications without needing a team of professional programmers. But is LC/NC a magic bullet?</span></p><p data-sourcepos="7:1-7:31"><span>Like most things in tech, the answer is "it depends." Here's a breakdown of when LC/NC development shines and when it might be better to consider traditional coding:</span></p><h2><strong>When LC/NC Wins</strong></h2><ul data-sourcepos="11:1-12:100"><li data-sourcepos="11:1-11:177"><strong>Simple workflows and processes:</strong><span> Do you need an app to streamline data entry, customer onboarding, or internal approvals? LC/NC platforms excel at automating these common tasks.</span></li><li data-sourcepos="12:1-12:100"><strong>Fast turnaround times:</strong><span> Got a burning business need that can't wait for months of development? LC/NC lets you build prototypes and deploy solutions quickly.</span></li><li data-sourcepos="13:1-13:194"><strong>Citizen developers:</strong><span> Business users with limited coding experience can leverage LC/NC tools to build solutions that directly address their needs. This frees up IT for more complex projects.</span></li><li data-sourcepos="14:1-15:0"><strong>Cost-effectiveness:</strong><span> LC/NC generally requires fewer resources than traditional development, making it attractive for startups and businesses with limited budgets.</span></li></ul><h2><strong>When to Code It Old-School</strong></h2><ul data-sourcepos="18:1-22:0"><li data-sourcepos="18:1-18:184"><strong>Complex integrations:</strong><span> Does your application need to interact with multiple back-end systems or databases? LC/NC platforms may have limitations in complex integration scenarios.</span></li><li data-sourcepos="19:1-19:157"><strong>Scalability concerns:</strong><span> Do you expect high user volumes or massive data sets? Traditionally coded applications might offer better performance and scalability.</span></li><li data-sourcepos="20:1-20:134"><strong>Security is paramount:</strong><span> Dealing with sensitive data? Custom development allows for more granular control over security measures.</span></li><li data-sourcepos="21:1-22:0"><strong>Unique functionalities:</strong><span> Do you need a unique feature that doesn't exist in any pre-built component? Coding provides the flexibility for such creative solutions.</span></li></ul><h2><strong>Enter Qodly: The Hybrid Advantage</strong></h2><p data-sourcepos="27:1-27:35"><span>Not all LC/NC platforms are created equal. </span><a href="https://qodly.com/"><span>Qodly</span></a><span> stands out as a hybrid low-code solution that seamlessly blends the ease of no-code development with the flexibility of custom coding. Qodly empowers both business users and professional developers to collaborate effectively, creating sophisticated applications that meet diverse business needs. With Qodly, organizations can leverage pre-built components for rapid development while also having the option to write custom code for more complex requirements. This hybrid approach ensures that applications are not only built quickly but also tailored precisely to the business’s unique challenges, making Qodly a versatile and powerful tool in the LC/NC landscape.</span></p>

<p>Choosing the right platform to build your software can be overwhelming. Two popular options are formula-based platforms and development platforms. But what exactly are they, and which one is right for you?&nbsp;</p><p data-sourcepos="5:1-5:127"><span>Let's see which one is your best fit!</span></p><p>&nbsp;</p><h2><strong>Formula-Based Platforms: Building with Elegance (and Efficiency)</strong></h2><p data-sourcepos="7:1-7:179">Imagine creating software with drag-and-drop ease, using pre-built formulas instead of lines of code. That's the magic of formula-based platforms. These platforms are perfect for:</p><ul data-sourcepos="9:1-12:0"><li data-sourcepos="9:1-9:143"><strong>Citizen Developers:</strong> Business users with limited coding experience can build basic applications to automate tasks or streamline workflows.</li><li data-sourcepos="10:1-10:135"><strong>Rapid Prototyping:</strong> Quickly test your software concept and get valuable user feedback before diving into full-fledged development.</li><li data-sourcepos="11:1-12:0"><strong>Simple Applications:</strong> Build internal tools, data dashboards, or primary customer portals without the complexity of traditional coding.</li></ul><p data-sourcepos="13:1-13:9"><strong>Pros:</strong></p><ul data-sourcepos="15:1-18:0"><li data-sourcepos="15:1-15:124"><strong>Easy to Use:</strong> Intuitive interfaces with drag-and-drop functionality and pre-built components make development a breeze.</li><li data-sourcepos="16:1-16:98"><strong>Faster Time to Market:</strong> Get your application up and running quickly without extensive coding.</li><li data-sourcepos="17:1-18:0"><strong>Reduced Costs:</strong> Citizen developers can build basic applications, potentially reducing reliance on professional developers.</li></ul><p data-sourcepos="19:1-19:9"><strong>Cons:</strong></p><ul data-sourcepos="21:1-24:0"><li data-sourcepos="21:1-21:106"><strong>Limited Functionality:</strong> Customization options might be restricted compared to development platforms.</li><li data-sourcepos="22:1-22:107"><strong>Scalability Concerns:</strong> Formula-based platforms may struggle with complex or large-scale applications.</li><li data-sourcepos="23:1-24:0"><strong>Vendor Lock-In:</strong> You might be limited to functionalities offered by the specific platform.</li></ul><p>&nbsp;</p><h2>Development Platforms: Building Without Limits</h2><p data-sourcepos="27:1-27:172">Development platforms offer a more traditional approach, empowering developers with robust tools to build anything they can imagine. These platforms are ideal for:</p><ul data-sourcepos="29:1-32:0"><li data-sourcepos="29:1-29:108"><strong>Complex Applications:</strong> Build feature-rich applications with complex functionalities and integrations.</li><li data-sourcepos="30:1-30:119"><strong>Custom Solutions:</strong> Tailor applications to your specific needs and integrate them with existing systems.</li><li data-sourcepos="31:1-32:0"><strong>Scalability:</strong> Development platforms can handle large amounts of data and users without breaking a sweat.</li></ul><p data-sourcepos="33:1-33:9"><strong>Pros:</strong></p><ul data-sourcepos="35:1-38:0"><li data-sourcepos="35:1-35:108"><strong>Complete Control:</strong> Developers fully control the code, allowing maximum customization.</li><li data-sourcepos="36:1-36:86"><strong>Scalability:</strong> Build applications that can grow and adapt to your evolving needs.</li><li data-sourcepos="37:1-38:0"><strong>Flexibility:</strong> Integrate with various tools and libraries to create truly unique solutions.</li></ul><p data-sourcepos="39:1-39:9"><strong>Cons:</strong></p><ul data-sourcepos="41:1-44:0"><li data-sourcepos="41:1-41:105"><strong>Steeper Learning Curve:</strong> Requires coding expertise, which can be a barrier for non-technical users.</li><li data-sourcepos="42:1-42:100"><strong>Slower Development Time:</strong> Building complex applications from scratch takes time and resources.</li><li data-sourcepos="43:1-44:0"><strong>Higher Costs:</strong> This may require hiring professional developers, which can be expensive.</li></ul><p>&nbsp;</p><h2><strong>So, Which Platform is Your Perfect Match?</strong></h2><p data-sourcepos="47:1-47:94">The answer depends on your project requirements and technical expertise. Here's a quick guide:</p><ul data-sourcepos="49:1-51:0"><li data-sourcepos="49:1-49:132"><strong>Choose a Formula-Based Platform if</strong> you need a simple application, have limited coding experience, or value rapid development.</li><li data-sourcepos="50:1-51:0"><strong>Choose a Development Platform if</strong> you need a complex application, require complete customization, or have the resources for professional development.</li></ul><p>&nbsp;</p><h2>Enter Qodly: The Best of Both Worlds!</h2><p data-sourcepos="56:1-56:243"><span>But what if there was a sweet spot in the middle?&nbsp;</span></p><p data-sourcepos="56:1-56:243"><span>Introducing </span><a href="https://qodly.com/"><span>Qodly</span></a><span>, a hybrid low-code platform that combines the ease of use of a simple builder with the flexibility of a developer playground.&nbsp;</span></p><p data-sourcepos="56:1-56:243"><span>With Qodly, you can leverage pre-built components and a visual drag-and-drop interface to get started quickly while still being free to customize your app with code if needed. This makes Qodly the perfect solution for many projects, from basic workflows to complex business applications.</span></p>

<p>In web development, having a unified tool that bridges the gap between designers, clients, and developers is crucial. It not only saves valuable time but also prevents integration issues and reduces lead times, ultimately cutting down costs significantly. Qodly stands out as such a tool, offering a seamless experience where designers can create stunning interfaces, clients can visualize their ideas come to life, and developers can efficiently implement these designs into fully functional web applications.</p><p>&nbsp;</p><h2>Exploring Qodly Studio's Drag-and-Drop Interface</h2><p>Qodly features an intuitive drag-and-drop interface through Qodly Studio. This design environment allows you to create functional front-end pages without needing extensive coding knowledge. You can quickly assemble an application interface with a few clicks.</p><p>&nbsp;</p><h2>Components and Templates</h2><p>Qodly Studio includes various components and templates, helping you efficiently bring your ideas to life efficiently. These elements are flexible and customizable, so you can adjust them to meet your specific needs. Additionally, Qodly continuously adds new components and templates, ensuring you have access to the latest tools.</p><p>&nbsp;</p><h2>Qodly in action</h2><p>Watch our video demonstration to see Qodly in action and discover how it simplifies web development for designers, clients, and developers alike.</p><p class="text-align-center"><iframe width="853" height="480" src="https://www.youtube.com/embed/7UTF-DvplbY" title="Build Your Trello Clone in Minutes!" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe></p>

<p>Creating web applications shouldn't feel like a battle against code. If you're looking for a way to create powerful, dynamic web applications without getting bogged down in technical complexities, Qodly is your answer!</p><p>In this introductory video, we take a look at Qodly Studio, our low-code IDE designed to make web app development more accessible.</p><p>Through the lens of creating an Inventory Management app, we explore the features and functionalities of Qodly Studio.</p><p>&nbsp;</p><p class="text-align-center"><iframe width="853" height="480" src="https://www.youtube.com/embed/Tx7Lhb7h5PI" title="Build Your Trello Clone in Minutes!" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe></p>

<p>Businesses often use custom apps specifically designed to automate workflows or enhance customer experience. In the past, app development was a long, technical, and expensive process that only larger businesses could benefit from.&nbsp;</p><p>However, with the introduction of low-code platforms, citizen developers with little technical experience could develop their own apps quickly and affordably. Now, even emerging businesses can benefit from automating their systems with their own custom-built apps.&nbsp;</p><p>That being said, if you want to build your own app, you'll need to follow eight critical steps in the app development you'll that you'll need to follow.</p><img src="/sites/default/files/howtobuildacustomapp.png" data-entity-uuid="b046322d-45e7-40d5-b843-ddd8ed7829d0" data-entity-type="file" alt="" width="1236" height="828"><p>&nbsp;</p><h2>8 Steps to Make a Custom Application&nbsp;</h2><h3>Step 1—Ideation</h3><p>The first step is clearly defining your objectives and requirements for the app clearly. To do this, it is best to first start with the pain points you want to address first. For example, if you're going to develop an app to automate a filling system, first:&nbsp;</p><ul><li>List the problems with the current ways your filing system works.&nbsp;</li><li>Work out how the app can solve each one of these problems.&nbsp;</li><li>Then, lay out your objectives and requirements for the app.&nbsp;</li></ul><p>Once you have a clear understanding of the app's intended problems and what it needs to be capable of solving them, it is time to conduct some market research.</p><p>&nbsp;</p><h3>Step 2—Conduct Market Research</h3><img src="/sites/default/files/conductmarketresearch.png" data-entity-uuid="86ad1982-b751-4b53-8572-d8b845866778" data-entity-type="file" alt="" width="1234" height="822"><p>Whether you are building an app that will compete with other apps in the market or simply one to be used in-house for behind-the-scenes work, you'll want to conduct thorough market research.</p><p>No matter how unique your idea is for a custom app is, there is likely something similar out there. So, it is essential to research and learn from all similar apps. Ask yourself:</p><ul><li>What does their app have that mine doesn't?</li><li>How is their app performing?&nbsp;</li><li>Are there any pain points that my app should solve that theirs doesn't?</li></ul><p>Ultimately, the purpose of this market research is to inform you about how you go about developing your own app.</p><p>&nbsp;</p><h3>Step 3—Choose a Low-Code Development Platform</h3><p>Low-code platforms allow companies and citizen developers to create apps as quickly and efficiently as possible. They provide the tools needed to create an app. Depending on which platform you choose, how you design and create your app will vary depending on which platform you choose.&nbsp;</p><p>As such, it is essential to find one that works for your needs before deciding on your app's design and development process for your app.&nbsp;</p><p>Some popular platforms out there to choose from include Salesforce, Microsoft Power Platform, and UiPath. These platforms offer features such as drag-and-drop functions, AI integrations, and team management tools.&nbsp;</p><p>For those wanting a simple all-in-one solution. Qodly combines low-code and hybrid options to allow more flexibility in the app development process. It is also made for those who want to develop, deploy, and run their apps all on one platform.</p><p>&nbsp;</p><h3>Step 4—Build an MVP&nbsp;</h3><p>Once you are ready to start the app development process, start by prototyping and testing the features you want. Once you are satisfied with your desired features, it is time to build an MVP or Minimum Viable Product. An MVP is the skeleton of the final product.&nbsp;</p><p>Start by designing the layout of your app and adding basic functionality to it along with the core features.</p><p>&nbsp;</p><h3>Step 5—Test It!</h3><img src="/sites/default/files/testtheapp.png" data-entity-uuid="5a975505-406d-41f3-9e8e-e86849535704" data-entity-type="file" alt="" width="1236" height="826"><p>Once you have your MVP, test it. Get feedback on the user experience and find all the shortfalls. Ensure all the core features function as expected, and list all the improvements and additions that the final product should have.&nbsp;</p><p>&nbsp;</p><h3>Step 6—Build the App&nbsp;</h3><p>Next, it's time to build the app. During this process, it is important to conduct regular code reviews and testing to ensure the app development process is heading in the right direction and to catch any bugs early on in the process.&nbsp;</p><p>&nbsp;</p><h3>Step 7—Quality Assurance&nbsp;</h3><p>Once your app is built, the next step is to develop a testing strategy for testing different app features to ensure that they meet predefined standards and objectives.</p><p>Performing functional and non-functional testing is also helpful. Functional testing ensures that everything is working correctly, and non-functional testing checks the app's overall performance, security, and UI of the app.&nbsp;</p><p>&nbsp;</p><h3>Step 8—Launch It and Collect User Feedback&nbsp;</h3><p>Lastly, it is time to launch your app and collect user feedback to improve its performance. Some of the best ways to collect user feedback are through interviews and surveys.</p><p>&nbsp;</p><h3>Summary&nbsp;</h3><p>All in all, custom applications can significantly automate your business process or improve customer satisfaction. With low-code solutions, citizen developers and those with low technical expertise can develop custom apps quickly and affordably—allowing even small companies to take advantage of the benefits that custom business applications can bring.</p><p>&nbsp;</p><hr><p>Tired of the complexities of traditional web development? <a href="https://qodly.com/" target="_blank">Qodly</a> offers a streamlined approach that empowers citizen developers, freelancers, and small businesses to create powerful web applications with ease. Backed by 4D's decades of experience in cross-platform app development, Qodly provides a hybrid low-code platform that combines the efficiency of drag-and-drop tools with the flexibility of custom coding.</p>

<p><br>Have you been curious about Qodly but unsure where to start? This post is your perfect introduction!</p><p>Today, I'm taking you on a journey through building a fun and engaging application – a pet contest! But this isn't just any pet contest app; it's a chance to explore the exciting capabilities of Qodly, the hybrid low-code platform.&nbsp;</p><p>As someone who's transitioned from software engineering to product and marketing, I'm always on the lookout for tools that bridge efficiency and customization. Qodly's promise of both intrigued me, and I couldn't wait to test it with a simple yet engaging app—a pet contest!</p><h2>&nbsp;</h2><h2>Building our Pet Paradise</h2><p>The application's idea is straightforward, a single-page interface where users can participate in three key actions:</p><p><strong>Add pets:</strong> People can upload a picture and name for their pet, adding them to the contest.&nbsp;</p><p><strong>Vote for pets:</strong> This is the fun part! Users can vote for their favorite pets, making the cutest ones more popular.&nbsp;</p><p><strong>See top 10:</strong> Witness pet popularity come alive as the top ten "cutest" pets are displayed based on the votes.</p><p>This seemingly straightforward app serves as a perfect example to showcase Qodly's basic functionalities.</p><img src="/sites/default/files/petsapp2.png" data-entity-uuid="bcafde82-03d7-471c-8960-88e0a2a8aa8d" data-entity-type="file" alt="" width="1020" height="373"><p>&nbsp;</p><p>Clicking the "Add New Pet" button will open a dedicated dialog, allowing users to upload their pet's picture and name. We'll delve into configuring this pet submission process in the next section.</p><p>&nbsp;</p><img src="/sites/default/files/petsapp1.png" data-entity-uuid="f763f9bc-abcb-4c40-b147-91f5c60c0c7e" data-entity-type="file" alt="" width="1020" height="373"><h2>&nbsp;</h2><h2><em>Building the backend with Qodly</em></h2><p><em>While the user interface may appear simple, there's some magic happening behind the scenes (don't worry, it's friendly magic!).</em></p><p><em>In this blog post, we'll delve into the world of models and webforms, the building blocks of our pet contest app.&nbsp;</em></p><p><em>We'll see how Qodly eases the process with its intuitive tools.</em></p><h3>&nbsp;</h3><h3>Create The model</h3><p><a href="https://developer.qodly.com/docs/studio/model/model-editor-interface">The model</a> defines the data structure for our app. We'll create a dataclass named Pet to hold information about each pet. This dataclass will have attributes like name, picture, and other relevant details.</p><img src="/sites/default/files/Pettable.png" data-entity-uuid="0cfdb38c-df5e-41ac-a94b-d344a4d54fda" data-entity-type="file" alt="" width="498" height="322"><h3>&nbsp;</h3><h3>Create The webform</h3><p>This is where users will interact with the app and provide information about their pets. &nbsp;</p><p>Qodly makes building web forms easy, even for those without coding experience! It allows you to create the form layout visually using drag-and-drop functionality.</p><p><a href="https://developer.qodly.com/docs/studio/pageLoaders/pageLoaderOverview">Create a new webform</a> and call it index. Start dragging your components (see the following section).</p><h4>&nbsp;</h4><h4>Setting Up The Voting Section:</h4><p>For the voting section:</p><p>- Start by dragging a <a href="https://developer.qodly.com/docs/studio/design-webforms/components/stylebox">stylebox</a>: This will act as a container for the voting elements.</p><p>- Inside the stylebox, drag an <a href="https://developer.qodly.com/docs/studio/design-webforms/components/image">image</a> component: Place this inside the style box to display the pet image users will vote on.</p><p>- Drag two <a href="https://developer.qodly.com/docs/studio/design-webforms/components/button">buttons</a> with the labels "Cute" and "Not Cute" inside the stylebox to capture users' votes.</p><img src="/sites/default/files/votingsection.png" data-entity-uuid="5fc1073e-69ba-407a-a659-8580248d4da4" data-entity-type="file" alt="" width="1218" height="430"><h4>&nbsp;</h4><h4>Adding a new pet:</h4><p>Now, let's move to the action of Adding a new pet.&nbsp;</p><p>Drag a button onto your workspace. Clicking this button will later open the pet creation dialog.</p><img src="/sites/default/files/addnewpet.png" data-entity-uuid="379b66ba-e426-4bdf-981d-6db1ffa9883c" data-entity-type="file" alt="" width="1244" height="122"><h4>&nbsp;</h4><h4>Displaying top 10 pets:</h4><p>To show the top ten pets, drag a <a href="https://developer.qodly.com/docs/studio/design-webforms/components/matrix">matrix</a> components inside the stylebox. Think of this matrix as a grid layout that will showcase the top ten pets.</p><img src="/sites/default/files/matrixlistpets.png" data-entity-uuid="dddf0a9a-19ac-4e45-8b8a-983980618786" data-entity-type="file" alt="" width="1796" height="834"><h3>&nbsp;</h3><h3>Creating The Pet Creation Dialog</h3><p>Once users click the "Add New Pet" button, they'll need a way to provide information about their pet. In Qodly, this could be done through a <a href="https://developer.qodly.com/docs/studio/design-webforms/components/dialog">dialog</a>.</p><p>From the Qodly interface, use this button to create a new dialog and name it "addPet".</p><p>&nbsp;</p><img src="/sites/default/files/dialog.png" data-entity-uuid="0fea38f0-3f44-4e2f-888e-9459dd3b7c8f" data-entity-type="file" alt="" width="1376" height="672"><p>Within the dialog, use drag-and-drop to add the following elements:&nbsp;</p><p>- A file upload component where users can select their pet's picture.&nbsp;</p><p>- A text input field for users to enter their pet's name.</p><p>- You can optionally add an image component that displays a default image when the dialog first opens. This can provide a visual cue to users about what kind of image they should upload.</p><img src="/sites/default/files/addnewpetdialog.png" data-entity-uuid="e03cd23e-2463-4b2d-bd1d-4b1192ae0270" data-entity-type="file" alt="" width="1324" height="820"><h2>&nbsp;</h2><h2>Wiring Everything up</h2><p>Here comes the fun part!&nbsp;</p><p>Now that you've built the visual structure of your web form using Qodly's drag-and-drop features, it's time to connect everything and make it functional.&nbsp;</p><p>This will likely involve writing some code (don't worry, Qodly simplifies this process too)!</p><h3>&nbsp;</h3><h3>Adding a new pet</h3><p>The first step is to allow users to submit new pets to the contest. Qodly's <a href="https://developer.qodly.com/docs/studio/design-webforms/events#binding-standard-actions-to-events">standard actions</a> make this process easy—no single line of code is needed!</p><p>Go ahead and open your dialog,&nbsp;</p><img src="/sites/default/files/opendialog.png" data-align="center" data-entity-uuid="163c106d-6ed6-446a-be16-83d25275804b" data-entity-type="file" alt="" width="940" height="314"><p>&nbsp;</p><p><strong>What We Want to Achieve</strong>&nbsp;</p><p>Before diving into the configuration, let's clarify the goal here: When the user uploads a pet's image, enters a name, and clicks "Submit," we want that information to be saved as a new entry in your database.&nbsp;</p><p>But before we get there, there's an important step: <strong>Mapping user input to the database</strong>.</p><p>Before we configure the button to save new pets, let's ensure the user's input is properly mapped to the corresponding fields in your database. Here's how to achieve this:</p><p>1 - <strong>Create a data source of type Entity</strong>: Name it "addPet". Refer to Qodly's documentation for detailed instructions on creating a <a href="https://developer.qodly.com/docs/studio/design-webforms/datasources">data source</a> of type "<a href="https://developer.qodly.com/docs/orda/data-model#entity">Entity</a>" that reflects your pet's data structure (e.g., name, picture, etc.).&nbsp;</p><img src="/sites/default/files/addpetds.png" data-entity-uuid="57357a6d-8d71-48ad-aeb8-2d53aaef3eaf" data-entity-type="file" alt="" width="916" height="482"><p>&nbsp;</p><p>2 - <strong>Map input fields to entity properties:</strong> &nbsp;Once you have the entity data source, use Qodly's interface to map the user input fields (pet name, picture) to the corresponding properties within the entity. This ensures the data is stored correctly in your database.</p><img src="/sites/default/files/mapimage.png" data-entity-uuid="d25433fd-7823-4394-915c-7b602ce1967b" data-entity-type="file" alt="" width="1840" height="488"><img src="/sites/default/files/mapname.png" data-entity-uuid="2bca5836-a703-43a3-9126-e0a8689db141" data-entity-type="file" alt="" width="1836" height="372"><p>In Qodly's interface, navigate to the events panel for the "Submit" button within the pet creation dialog. This panel allows you to define actions triggered by user interactions.</p><img src="/sites/default/files/eventspanel.png" data-entity-uuid="c9a9418b-706c-4789-883f-5c67413812a6" data-entity-type="file" alt="" width="1124" height="614"><p>Within the events panel, choose the "on Click" event and then select "Add a standard action."&nbsp;</p><img src="/sites/default/files/addsa.png" data-entity-uuid="65b5c7ab-7a49-4adc-86a3-dc5843f2c185" data-entity-type="file" alt="" width="594" height="276"><p>From the available options, select the "Save" standard action. This action will save the data entered by the user to your database.</p><img src="/sites/default/files/saveSA.png" data-entity-uuid="94ec003e-08a6-4a19-92ea-29a6ef7c17e9" data-entity-type="file" alt="" width="716" height="622"><p>&nbsp;</p><h3>BUT</h3><p>There's a crucial step before saving new pet information: <strong>pre-populating the entity with an empty record when the dialog loads (on Init)</strong>. Qodly will not automatically create a new entity instance for you to save.</p><p>By pre-populating the entity, you essentially create a blank "container" for the user's input. When the user clicks "Submit," the data entered (pet name, image) will be populated into the existing entity, allowing you to successfully save it to your database using the "Save" standard action.</p><img src="/sites/default/files/createnetity.png" data-entity-uuid="26559d41-406b-49ba-b68e-59b46e3b22a1" data-entity-type="file" alt="" width="1334" height="598"><p>Once you've configured the button action, test the functionality by adding a new pet. The user should be able to enter pet information, and clicking "Submit" should successfully save the new pet entry to your database.</p><p>&nbsp;</p><h3>Bonus</h3><p>Qodly offers a built-in <a href="https://developer.qodly.com/docs/data-explorer/">Data Explorer</a>, a web interface that allows you to:</p><p>- <strong>Browse and Inspect: </strong>Easily view all your entities (including pets) and their data.&nbsp;</p><p>- <strong>Search and Filter:</strong> Quickly find specific pet entries using search and filter options.&nbsp;</p><p>- <strong>Edit on the Fly:</strong> If needed, you can directly edit data within the Data Explorer for troubleshooting or adjustments.</p><p>Locate the Data Explorer within Qodly's interface:</p><img src="/sites/default/files/dataexplorer.png" data-entity-uuid="138ae9b9-47a4-446d-9842-01efab57c129" data-entity-type="file" alt="" width="1568" height="410"><p>If you can find your newly added pet with the corresponding details (name, picture), then congratulations! You've successfully saved the pet entry.</p><h3>Displaying the top ten pet</h3><p>Now that you can add new pets, let's showcase them on the main interface!&nbsp;</p><p>Here, Qodly's configuration shines with its user-friendly approach.</p><p>Start by creating a data source of type "Entity Selection." &nbsp;Name this data source "pets" to clearly represent its purpose. This data source will act as a bridge between your application and the database, specifically retrieving information about the top ten pets.</p><p>&nbsp;</p><img src="/sites/default/files/mapmatrix.png" data-entity-uuid="03469a34-0c71-4258-a4c1-c799e8a59df5" data-entity-type="file" alt="" width="2012" height="1228"><p>With the "pets" data source created, it's time to connect it to the visual element displaying the pet list.&nbsp;</p><p>This element is a "matrix" in Qodly. Use Qodly's interface to map the "pets" data source to this list element.</p><p>Now, it's time to personalize how each pet is displayed on the list. Drag and drop the desired elements you want to show for each pet, such as the pet's name, picture, and any other relevant information. Qodly's visual interface should allow you to easily position these elements for a visually appealing presentation.</p><h4>Adding a CSS touch</h4><p>While we'll delve deeper into CSS styling in a future blog post, feel free to experiment with basic visual adjustments from the right-hand panel within Qodly's interface. You can adjust spacing and add a border radius to your image.</p><p>&nbsp;</p><img src="/sites/default/files/dragndropattributes_0.png" data-entity-uuid="231f78b8-b733-4eb9-a4ef-f7eb6cd52ea3" data-entity-type="file" alt="" width="1806" height="450"><p>For now, you should be able to see the whole list of pets in your database. Let's refine it to see only the top 10.&nbsp;</p><p>Let's create a function that does that.</p><p>Go to your Qodly model and create a new function named topTen. This function will return a selection of pets, specifically the top ten "cutest" ones.</p><img src="/sites/default/files/toptenmodel.png" data-entity-uuid="5c927c47-993c-429c-be23-a7d878cc1441" data-entity-type="file" alt="" width="552" height="558"><p>it will automatically create the function in the Pet class.</p><img src="/sites/default/files/petclass.png" data-entity-uuid="0f22e481-7c07-4d28-9a4d-31e48bffaf6a" data-entity-type="file" alt="" width="928" height="380"><p>&nbsp;</p><p>Simply add this code that displays the top ten pets:</p><pre><code class="language-4d"> exposed Function topTen() -&gt; result: cs.PetSelection result = this.query("totalCutes &gt; totalNotCutes").orderBy("totalCutes desc").slice(0,10)</code></pre><p>&nbsp;</p><p>This code snippet showcases the logic behind the topTen function:&nbsp;</p><ol><li>.query("totalCutes &gt; totalNotCutes"): This filters the pet selection to only include pets where the "totalCutes" score is greater than the "totalNotCutes" score.&nbsp;</li><li>.orderBy("totalCutes desc"): This orders the filtered pet selection by their "totalCutes" score in descending order (showing the most "cutes" first).&nbsp;</li><li>.slice(0,10): This limits the final result to the first ten entries, effectively retrieving the top ten "cutest" pets.</li></ol><p>In the next step, we'll configure Qodly to call this topTen function when the webform loads, ensuring only the top ten pets are initially displayed.</p><img src="/sites/default/files/functioncall.png" data-entity-uuid="eec5ff97-31a3-4648-aa02-d3a2b8c461af" data-entity-type="file" alt="" width="584" height="292"><p>&nbsp;</p><img src="/sites/default/files/functionalconf.png" data-entity-uuid="8720719b-14e1-496e-82c7-417bd1b424e6" data-entity-type="file" alt="" width="1286" height="318"><p>Let's move to the last part.</p><p>&nbsp;</p><h3>Voting functionality</h3><p>Now that you have the cutest contenders showcased, let's allow users to cast their votes!&nbsp;</p><p>We'll implement two functions in Qodly to achieve this:</p><ol><li>randomPet function: This function will retrieve a random pet from the database, ensuring a dynamic voting experience for users.&nbsp;</li><li>vote function: This function will handle user votes, incrementing either the "totalCutes" or "totalNotCutes" score in the database based on the user's choice.</li></ol><h5>randomPet function</h5><p>Go to your Qodly model and create a new function named randomPet. This function will return a single random pet entity.</p><pre><code class="language-4d">exposed Function randomPet() -&gt; result: cs.PetEntity var pets: cs.PetSelection pets = this.all() result = pets.at(random%pets.length)</code></pre><p>&nbsp;</p><p>This function retrieves all the pets using this.all().&nbsp;</p><p>It then uses the random() function to generate a random number within the range of the pet selection's length. Finally, it uses the at(index) method to access and return the pet entity at the randomly chosen index.</p><h5>&nbsp;</h5><h5>Vote function</h5><p>Go to your PetEntity class (where individual pet data is defined) and create a new function named vote. This function will take a boolean argument (cute) indicating the user's vote.</p><pre><code class="language-4d"> exposed Function vote(cute : boolean) if (cute) this.totalCutes+=1 else this.totalNotCutes+=1 end this.save()</code></pre><p>&nbsp;</p><h5>Connecting Functions to User Interactions</h5><p>In Qodly's interface, configure your webform's onLoad event to call the randomPet function. This will ensure a random pet is displayed initially for voting.</p><img src="/sites/default/files/randomPet.png" data-entity-uuid="52fa8bcf-7443-43d7-9f09-2dcb5d4a7dcc" data-entity-type="file" alt="" width="714" height="478"><p>Configure the "Cute" and "Not Cute" buttons with the onClick event. When a user clicks either button, trigger the vote function, passing true for "Cute" and false for "Not Cute" to update the corresponding vote count.</p><img src="/sites/default/files/cute.png" data-entity-uuid="9e4763ef-0337-4cc9-b77f-573f303057c1" data-entity-type="file" alt="" width="752" height="532"><img src="/sites/default/files/notcute.png" data-entity-uuid="692103c4-19b6-4fe7-98fb-75b867a3f980" data-entity-type="file" alt="" width="742" height="524"><p>&nbsp;</p><p>Test the functionality by running your application. You should be able to see a random pet displayed on load. Clicking "Cute" or "Not Cute" should update the pet's respective vote count.&nbsp;</p><p>Congratulations! You've successfully built a core voting system for your pet contest application using Qodly's functionalities.</p><h2>Coming Up Next</h2><p>This is just the first step in our journey!&nbsp;</p><p>In the next part of this series, we'll use the power of CSS to create a visually appealing user interface. We'll also explore how Qodly empowers you to personalize your app beyond the basic functionalities.</p><p>Stay tuned for exciting updates, and get ready to build your own delightful pet contest app!</p><p>Meanwhile, if you have any questions, feel free to connect with us on the <a href="https://community.qodly.com/">Forums</a> or <a href="https://qodly.slack.com/join/shared_invite/zt-20ieeffts-NU57SOXcbakmWgIMnJpStQ#/shared-invite/email">Slack</a>.</p>