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