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/introduction

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.

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

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.

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

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/create-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-snippet

Adding Pagination​

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

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

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

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

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

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

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/introduction-to-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/design-page-ui

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/design-page-ui

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/design-page-ui

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.

https://academy.drapcode.com/docs/app-pages/design-page-ui

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

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/add-data-to-collection

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.

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

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.

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

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-introduction

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-introduction

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.

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

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