A Basic Understanding of the DrapCode Builder
Dec 1, 2021
DrapCode is a no code platform that allows you to build powerful responsive web applications without any coding. Its drag-and-drop interface and readymade components help you to build, design and launch apps ten times faster than coding.
So, let’s understand the basic features and functionalities of the DrapCode builder:
Builder Console
After opening a project, you land up on the builder console where all action takes place. It consists of a canvas, style manager, layer manager, components panel, etc. discussed below.
Components, Sections & Pre-Built Layouts
Drag-and-drop components are ready-to-use. So just click the big add button in the top bar and a list of all components will open. You just have to drag-and-drop the components in the canvas and edit them as you like.
Sections contain a list of readymade structural layouts to help you sketch and build the layout of your web app. All the sections are drag-and-drop so you just have to drop a section in the canvas where you want and drag and drop other components in it.
Prebuilt layouts contain several ready-to-use web pages with different themes and designs. So, if you don't want to build and design a web page brick by brick, you can easily use a pre-built section to construct your web app.
Style Manager
Style manager is located in the left toolbar on the builder console. It contains different no code design tools to edit the display and dimensions of a component or design them by editing their typography or background, etc.
Pages & Page Links
Building a page is very easy and straightforward. The Pages icon in the Left Toolbar opens the page tab. And you can add multiple pages in your web application. You can create, organise and change the structure of pages according to your requirement and website design.
You can either create a blank page and then build everything on it from scratch or you can clone/copy an existing page, so you get a page structure that you can modify instead of building everything from scratch.
Once a page is created, you can drag-and-drop different components in it as per your layout design. And then customise those components to meet your requirements. In the example below, a navbar is added and then different pages are linked to it.
To know more about pages and page inking, check out:
Collections & Displaying Collection Data Using CMS Components
Collections are like a database in DrapCode. Therefore, it is a very important and useful feature to build apps on DrapCode. Creating collections is very easy. Just open the collections tab and click the Create button. You will be redirected to the create collection page. Here name your collection and then add fields to it. Once different fields are added, add data into it. Then use CMS components like data table, data list and data group to display the data. You can also add data dynamically through a collection form by using events.
Know all about collections in detail:
Collection Form
In DrapCode, there are different readymade forms and collection form is one of them. It is mostly used when you want to bring data dynamically. So to add a collection form, open the components panel, scroll down to “Forms” and drag-and-drop the collection form component in a page. Then create events, which are discussed down below.
Events
Events are the automated workflows that allow you to set the automated sequence of actions. You can create different events to perform a chain or sequence of actions without coding. To create an event, just go to the events tab and click the Add Event button. You will be redirected to the create event page. Here name the event and add different event actions as you want. For example, create a Save Data event to automatically save data to a collection.
Once the Save Data event is created, bind it to a collection form. Now when any data is submitted through the collection form. It will get saved to the collection automatically.
Know all about events in detail:
Assets
The assets panel is placed in the Left Toolbar. It allows you to create an image library of your own, either by uploading images from your system or by searching them in the in-built image library of the builder that contains thousands of free images with no copyright issues. You can also add an image from Google if you want.
Plugins
DrapCode has several third-party plugins that allow you to easily integrate additional functionalities to your no code/low code web applications.
Know all about plugins in detail: