Skip to main content

Documentation Manual

Introduction to DrapCode

What is DrapCode?

DrapCode is a no code multi-purpose application builder that allows techies and non-techies to easily build, design and launch web applications using the drag-and-drop method.

https://academy.drapcode.com/docs/introduction

Why to Use DrapCode?

It’s an end-to-end development model that provides every tool and system from web designing and building to content management to hosting and workflow automation.

https://academy.drapcode.com/docs/why-drapcode

Create Your DrapCode Account

Signing up for DrapCode Account

You can start building amazing web app projects, once you have signed up and created an account on DrapCode. You can also sign up through your Google, Facebook or Github account.

https://academy.drapcode.com/docs/create-account

Email Confirmation

Once, an account is created, you will receive an email to confirm that you've successfully created an account on DrapCode.

Create Your First Project

Create a Project

Building web apps on DrapCode is very easy and straightforward, so after creating account start with your first web app building project.

https://academy.drapcode.com/docs/create-project

Access the Project

Once a project is created, it will appear in your dashboard in the form of a card with the project name and setting icons on it.

Edit the Project

You can easily change the settings of the project as well as project details added while creating it.

https://academy.drapcode.com/docs/app-create-project/start-project

App Builder

Introduction to App Builder

The app builder is where you will do the building and designing work, so learn detail what does the app builder contains to help you build your web application.

https://academy.drapcode.com/docs/app-builder-introduction

Components

Components or elements are the one of the most important characterstics of DrapCode. It contains various ready-to-use building blocks which are to be just dragged and dropped to build a web app.

https://academy.drapcode.com/docs/app-builder/components-introduction

Component Tools

Each component has a set of additional tools to move, duplicate or delete the component as well as to open its component settings.

https://academy.drapcode.com/docs/app-builder/components-tools

Basic Components

Adding a Text

Text component is a basic component that allows you to add a text box anywhere you want, while laying the structure of your web app.

https://academy.drapcode.com/docs/app-builder/basic-component-text

Adding a Header

Another text-based component under basic category that allows you to add a header in your canvas to add heading text.

https://academy.drapcode.com/docs/app-builder/basic-component-header

Adding a Paragraph

Paragraph component is another text-based component under basic category to provide you a text box to add mutiple lines.

https://academy.drapcode.com/docs/app-builder/basic-component-paragraph

Adding a Badge

A text-based basic component that allows you to add highlighted text to draw attention or emphasis on it.

https://academy.drapcode.com/docs/app-builder/basic-component-badge

Adding an Image

Image component helps you to add pictures or images in your web app UI. In DrapCode, images are like assets which we can be uploaded from a device, searched online or searched in the free in-built image repository in the assets panel.

https://academy.drapcode.com/docs/app-builder/basic-component-image

Adding a Video

Video component is another basic component that allows you to add a video hosted by the third parties like YouTube and Vimeo.

https://academy.drapcode.com/docs/app-builder/basic-component-video

Link component under basic category allows you to add different types of links such as a URL link, a page link, an e-mail link and a phone link in your website or web application.

https://academy.drapcode.com/docs/app-builder/basic-component-link

Adding an Icon

Icon component under basic category allows you to add a variety of icons in your web application.

https://academy.drapcode.com/docs/app-builder/basic-component-icons

Adding a Custom Code

DrapCode allows you to build your web app very flexibly. So, by using the custom code component you can easily add a custom or an extra feature in your web app the builder doesn't provide.

https://academy.drapcode.com/docs/app-builder/basic-component-custom-code

Layout Components

Using a Container

Container is a very important component to lay the layout of your website or web application. It allow you centralise all content and component in a webpage.

https://academy.drapcode.com/docs/app-builder/layout-component-container

Adding Row, Column & Column Break

Once a container is added, a row followed by a column is added to lay the complete layout structure of a webpage.

https://academy.drapcode.com/docs/app-builder/layout-component-row-column-break

Adding Ready-to-use Sections

Sections component spares you from building a website layout step-by-step using containers, rows and columns. It contains a variety of readymade webpage layouts to save timing while building a web app.

https://academy.drapcode.com/docs/app-builder/layout-component-sections

Adding a Navbar

Navbar component allows you to add a navigation bar at the top of a webpage. It's a readymade component which can easily be manipulated and styled.

https://academy.drapcode.com/docs/app-builder/layout-component-navbar

Adding a Sub Menu

Sub Menu component allows you to add menu in the navigation bar in the form of a dropdown list.

https://academy.drapcode.com/docs/app-builder/layout-component-sub-menu

Adding a Jumbotron

Jumbotron component is another layout component that contains other components such as header and paragraph within it. It adds a flexible to show hero unit-styled content.

https://academy.drapcode.com/docs/app-builder/layout-component-jumbotron

Adding a Sidebar

Sidebar component is similar to the navbar component which allows you to add a navigation bar in the left or the rightside of a webpage.

https://academy.drapcode.com/docs/app-builder/layout-component-sidebar

Footer component is also a layout component that allows you to add an additional navigation at the end of the webpage. It contains all the page links, website information, copyrights, etc.

https://academy.drapcode.com/docs/app-builder/layout-component-footer

Adding a List

List component is a readymade layout component that allows you to add content in the form of a list. It contains several components that can easily be deleted or replaced by other components of your choice.

https://academy.drapcode.com/docs/app-builder/layout-component-list

Form Components

List of Form Components

Form components under the Basic category contains different components related to forms. Here's a list of all the components together.

https://academy.drapcode.com/docs/app-builder/form-components

Form Components - Themes

Form components contains different types of ready-to-use forms which come in different theme styles.

https://academy.drapcode.com/

Form

This component adds a simple form in a page that can easily be customised as per your requirement.

https://academy.drapcode.com/docs/app-builder/forms-component-form

Collection Form

This component adds a collection form which is used to collect data or information from the users.

https://academy.drapcode.com/docs/app-builder/forms-component-collection-form

Advanced Components

Adding a Tab

This component adds a set of tabs in a page so you place content or data separately in different tabs.

https://academy.drapcode.com/docs/app-builder/advanced-component-tabs

Adding a List Group

This component adds a list group component that allows you to display content in the form of a static list.

https://academy.drapcode.com/docs/app-builder/advanced-component-list-group

Adding an Accordion

This component adds an accordion that allows you to display content in a collapsible content panel.

https://academy.drapcode.com/docs/app-builder/advanced-component-accordions

Adding a Snippet

Snippet component allows you to add or drop a previously created snippet in a page in your web app.

https://academy.drapcode.com/docs/app-builder/advanced-component-snippets-based-on-user-role#1-add-a-snippet

Adding Pagination

Pagination component allows you to show multiple pages in a component with related content.

https://academy.drapcode.com/docs/app-builder/cms-component-pagination#1-adding-pagination-component

Adding a Progress Bar

This component adds an animated static progress bar in your webpage.

https://academy.drapcode.com/docs/app-builder/advanced-component-progress-bar

  • Progress Bar Themes

    Once you have added a progress bar, you can change its theme and design very easily as per your need.

Adding a Countdown

Countdown component allows you to add a readymade countdown timer in a webpage.

https://academy.drapcode.com/docs/app-builder/advanced-component-countdown#1-adding-a-countdown

  • Setting a Countdown

    Once, you drop the countdown component in a page, you can easily customise it and set the timer as you want.

https://academy.drapcode.com/docs/app-builder/advanced-component-countdown#2-setting-a-countdown

CMS Component

Adding a Data Table

This component adds a data table so you can show data in the tabular format.

https://academy.drapcode.com/docs/app-builder/cms-component-data-table

  • Binding a Data Table with Collection Fields

    After dropping a data table in your canvas, you an easily bind a collection to automatically add same fields in the data table.

https://academy.drapcode.com/docs/app-builder/cms-component-data-table#binding-a-data-table-with-collection-fields

  • Adding a Reference Field in a Data Table

    Reference field in a collection won't show after binding a collection in a data table. You have to follow some additional steps to add a reference field in a data table.

https://academy.drapcode.com/docs/app-collection/multi-step-form-flow#1-create-a-reference-field

Adding a Data Group

This component adds a data group in your canvas that allows you to display content in the form of a card.

https://academy.drapcode.com/docs/app-builder/cms-component-data-group#adding-a-data-group

  • Binding a Data Group with Collection Fields

    After dropping a data group in your canvas, you an easily bind a collection to automatically add same fields in the data group.

https://academy.drapcode.com/docs/app-builder/cms-component-data-group#binding-a-data-group-with-collection-fields

Adding a Data List

This component adds a data list in your canvas that allows you to display content sssin the form of a list.

https://academy.drapcode.com/docs/app-builder/cms-component-data-list#adding-a-data-list

  • Binding a Collection with Data List Component

    After dropping a data list in your canvas, you an easily bind a collection to automatically add same fields in the data list.

https://academy.drapcode.com/docs/app-builder/cms-component-data-list#binding-a-collection-with-data-list-component

Style Manager

General Settings

Contains tools to adjust alignment, display and position of all the components.

https://academy.drapcode.com/docs/app-style-manager/general-settings

Dimension Settings

Contains tools to adjust the dimensional parametres of all the components.

https://academy.drapcode.com/docs/app-style-manager/dimension

Typography Settings

Contains tools to adjust the typography parametres of content added in the text-based components.

https://academy.drapcode.com/docs/app-style-manager/typography

Decorations Settings

Contains tools to style and design all the components.

https://academy.drapcode.com/docs/app-style-manager/decorations

Border Settings

Contains tools to add border inside a component.

https://academy.drapcode.com/docs/app-style-manager/border

Extra Settings

Contains tools to add transition effects in a component.

https://academy.drapcode.com/docs/app-style-manager/extra

Flex Settings

Contains tools related to the flex settings of the components.

https://academy.drapcode.com/docs/app-style-manager/flex

Pre-Built Sections

Accessing the Pre-Built Section

Pre Built Section contains several ready-to-use webpages with different themes and designs.

https://academy.drapcode.com/docs/app-pre-built-section/introduction-to-pre-built-section

Changing the Added Pre-Built Section

Once you have added a pre-built section in your canvas, you can easily change it with another one.

https://academy.drapcode.com/docs/app-pre-built-section/change-pre-built-section/

Pages & Page Settings

Adding a Blank Page

Pages panel allows you to add multiple blank pages in your web application so you can design each page from scratch.

https://academy.drapcode.com/docs/app-pages/create-a-page/blank-page

Adding a Page Using an Existing Page

In case, you want to add a page similar to an existing page, you can do that very easily.

https://academy.drapcode.com/docs/app-pages/create-a-page/create-page-with-existing-page

Adding a Page Using a Page Snapshot

Instead of using an existing page, you can also use page snapshots to create new pages.

https://academy.drapcode.com/docs/app-pages/create-a-page/create-page-with-page-snapshot

Deleting a Page

Just like adding a new page, deleting a page is also very easy. It can be done with a click of a delete button.

Advanced Page Settings

Advanced Settings of a page allows you to create a page snapshot of that page very easily with a single click of a button.

https://academy.drapcode.com/docs/app-pages/page-advanced-settings

  • Creating a Page Snapshot

    A page snapshot allows you to keep a safe copy of a page so it can be used again and again. Also, the process of creating a page snapshot is very simple and straightforward.

https://academy.drapcode.com/docs/app-pages/create-a-page/create-page-with-page-snapshot

  • Replacing a Page with a Snapshot

    Once you have created a snapshot, you can use it to replace the content of a content with it.

https://academy.drapcode.com/docs/app-pages/page-settings/page-advanced-settings#replacing-a-page-with-a-snapshot

  • Replacing a Page with an Existing Page

    Instead of using a page snapshot, you can also replace a page with any other existing page.

https://academy.drapcode.com/docs/app-pages/page-settings/page-advanced-settings#replacing-a-page-with-an-existing-page

SEO Page Settings

DrapCode has in-built SEO settings that contains all the settings needed to make a page SEO-friendly. Here, you'll also find some additional page-related settings, besides the SEO-related settings.

https://academy.drapcode.com/docs/app-pages/page-seo-settings

  • Adding Page Title, Description & Meta Description

    Under the SEO settings, you can add the page title, page description and page meta description to make a page SEO-friendly.

https://academy.drapcode.com/docs/app-pages/page-settings/page-seo-settings#page-title

  • Choosing Page Title from Collections

    In case, you want to use a title from a collection as a page title, you can do that easily in the SEO settings of a page.

https://academy.drapcode.com/docs/app-pages/page-settings/page-seo-settings#choosing-page-title-from-collections

  • Binding a Collection on a Page

    Under the SEO settings, you can easily bind a collection to a page, which is needed o run some workflow events.

https://academy.drapcode.com/docs/app-pages/binding-collection-with-page

  • Changing Page Index

    Once you have created several pages, you can organise them numerically by setting their page index.

https://academy.drapcode.com/docs/app-pages/page-settings/page-advanced-settings#page-index

Dynamic Collections

Introduction to Collections

Collections is an important feature in DrapCode that brings the dynamic behaviour in a web application. They are like the in-built database that stores the data which you can use in your application.

https://academy.drapcode.com/docs/app-collection/introduction-to-collections

Creating a New Collection

In the Collections panel, you can easily create as many collections you want as per your requirement.

https://academy.drapcode.com/docs/app-collection/create-collection

Fields/Columns in a Collection

Once a collection is created, add as many different fields or columns in it as you want.

https://academy.drapcode.com/docs/app-collection/fields-columns-in-collection

Adding Data in a Collection

After creating collection fields, you can directly add data in it and store it safely.

https://academy.drapcode.com/docs/app-collection/add-data-to-collection

Deleting Data from a Collection

The procedure of adding as well as deleting added data in a collection is very easy.

https://academy.drapcode.com/docs/app-collection/manage-collection#2-delete-collection-fields

Constructor Fields in a Collection

It allows you to add an additional function in a collection field so it doesn't remain empty if a user do not add add any input value in it.

https://academy.drapcode.com/docs/app-collection/constructor-in-collection

Derived Fields in a Collection

A derived field is a simple field or table field column whose value is derived from the value of one or more fields or columns on the same form or a constant.

https://academy.drapcode.com/docs/app-collection/derived-fields-in-collection

Constant Fields in a Collection

The constants in a collection allows you to apply a fixed value so you can you filter the data entries with a value.

https://academy.drapcode.com/docs/app-collection/constants-in-collection

Collection Filters

The filters in collections allows you to add customised filters in a collection.

https://academy.drapcode.com/docs/app-collection/filters-in-collection

Conditions in Collection Filters

Conditions is another functionality under collection that allows you to apply an additional condition a filter.

https://academy.drapcode.com/docs/app-collection/filter-conditions-collection

Constraint Fields in a Collection

The constraints in collections allows you to restrain data from getting repeated in a collection.

https://academy.drapcode.com/docs/app-collection/constraints-in-collection

Validations in a Collection

The validations allows you to apply a validation rule on different fields of a collection.

https://academy.drapcode.com/docs/app-collection/validations-in-collection

Snippet & Modal

Creating a Snippet

Snippet is a reusable component that allows you to create a reusable webpage. It saves time by sparing you from creating other pages in your web application from scratch.

https://academy.drapcode.com/docs/app-snippets/create-snippet

Deleting a Snippet

In case, you want to remove or delete a created snippet, then you can easily do that with click of a button.

Creating a Modal

Modal is also a re-usable like a snippet. It allows you to add a pop-up component that display content on your website in the form of a pop up box to grab the attention of the visitors.

https://academy.drapcode.com/docs/app-snippets/create-modal

Deleting a Modal

In case, you want to remove or delete a created modal, then you can easily do that with click of a button.

Adding Content & Components in a Modal

Modal component is very flexible, therefore you can easily add any component to give it a complete shape.

https://academy.drapcode.com/docs/app-snippets/modify-modal

Styling a Modal

DrapCode has a Style Manager which allows you to style and design all the components including the modal component.

https://academy.drapcode.com/docs/app-snippets/styling-modal

Automated Workflow Events

Creating an Event

In the Events panel, you can create as many automated workflow events you want for different event actions.

https://academy.drapcode.com/docs/app-event/event-introduction

Updating & Deleting an Event

Once an event is created, you easily make changes and update it or remove it by deleting it with the click of a button.

https://academy.drapcode.com/docs/app-event/event-update-collection

https://academy.drapcode.com/docs/app-event/event-delete-collection

Adding New Action in an Event

The workflow events can be created for different actions related to navigation, notification, etc.

https://academy.drapcode.com/docs/app-event/event-show-alert-message-action

Assets to Create a Image Library

Creating an Asset

You can easily create an image asset in DrapCode by finding images in image repository which contains thousands of free images without any copyright issues.

https://academy.drapcode.com/docs/app-assets/create-asset

Deleting an Asset

This app builder is flexible, so you can easily upload an image in the asset panel as well as delete it.

Plugins to add external services

Facebook Plugin

This component allows you to add a Facebook login/sign up button, so users can use their Facebook accounts to login or sign up your web application.

https://academy.drapcode.com/docs/app-plugin/facebook-plugin

Google Plugin

This component allows you to add a Google login/sign up button, so users can use their Google accounts to login or sign up your web application.

https://academy.drapcode.com/docs/app-plugin/google-plugin

LinkedIn Plugin

This component allows you to add a LinkedIn login/sign up button, so users can use their LinkedIn accounts to login or sign up your web application.

https://academy.drapcode.com/docs/app-plugin/linkedin-plugin