No code tutorial: Creating your first nocode application

Let's kick things off from the start.

In this tutorial, we will embark on the exciting journey of creating our very first application within the innovative NoCode-X platform. Our project will feature a simple “Hello World” page, adorned with both a sleek toolbar and a convenient side navigation menu. With NoCode-X’s user-friendly interface and powerful capabilities, you’ll soon discover how effortlessly you can bring your app ideas to life without writing a single line of code. Let’s dive in and explore the limitless possibilities of no-code app development!

To begin, please navigate to https://app.nocode-x.com/. Here, you’ll encounter the login page. If you haven’t yet registered, you can easily do so. Alternatively, you can use your Facebook, Google, or LinkedIn credentials to log in. For the purpose of this tutorial, we’ll walk you through the steps of creating a new user account.

Registering a new account

On the login page, click the “Register” button
Fill in you personal details
Click “Register” once more
Check you email inbox and confirm to activate your account.

Setting up your company

As first-time users, we are prompted to enter a company name. A company serves as an organizational unit encompassing one or more applications and a single subscription, among other things. After entering our company name, which in case of this tutorial is “DeskSculpt Inc” we can proceed to select the subscription plan that best suits our company’s needs.

Your subscription plan is vital as it determines the usage of your application. Think about the following significant aspects when picking a plan:

How much data will my applications store
How much time will my applications require of the NoCode-X CPU in order to run.
What is the estimated network traffic that my users will generate while using my applications.
How many developers will build my applications.

Remember, you can always keep a track of your status in the “usage” section of the platform where you also can switch subscription plans if needed.

Creating your first application

Since you’re fresh off the boat and have no applications under your company, NoCode-X makes it easy for you by prompting the creation process. Just click on “add a brand new application”

Customize your application:

Name: Give your application descriptive name
Description: Descibe in more detail what your application does.
Icon: Choose a recognizable icon for easy spotting amongst other applications.
Endpoint: Define a unique (within your company) endpoint for your application.

And that’s it! You’re now ready to embark on your NoCode-X journey. Dive deep, explore, and let your imagination run wild. With NoCode-X, the possibilities are truly boundless.

Your first webpage

Now, let’s proceed to build our first application. We start by creating a template which will resemble your page:

Click on the “Editor” link
Access the templates via the “Templates” button or by using ALT + t.
Click create and choose “Web page” with “en” as the language.

You’ll now see the template editor for your still yet empty template. We will now give this template a name and make sure our users can reach it without having to authenticate first.

If it is not open already, open the “Tool pane” by clicking on the upper right button with the tooltip “Toggle tool pane“
In the “Tool pane” choose “Template” to access the “Template properties“
Assign your template a name: “ROOT“, your changes will be saved automatically.
Open up the “Authorization” section in the “Tool pane” and disable authentication by unchecking the authentication box.

Reusability is key, even within nocode applications

NoCode-X focusses strongly on reusability of nocode logic / components. This enables us to easily combine existing solutions into a new application. These existing solutions can go from small building blocks to full blown applications that allow a high level of customization. That’s where NoCode-X differs from other no code platforms. It allows you to build your own building blocks without having to write code and use them across applications or even across companies. These building blocks reside in what we call “The Hub”. Each and every user has access to “The Hub” and can use it to install, update and even publish building blocks.

Navigate to “The Hub” by using the left side navigation.
Find and install “Vanilla sidenav” and “Vanilla toolbar“.

Once the installation is successful, you’ll have two plugins in your application. You can confirm this by visiting the plugins section by clicking on the plugins link in the sidenavigation, which provides an overview of all installed reusable plugins. You’ll also notice that the number of templates in the template overview has increased. Each plugin comprises a collection of templates and actions designed to provide a specific functionality.

Building your webpage

It is now time to design your first webpage by placing a toolbar and a sidenavigation on it. We will start by implementing the toolbar.

Head back to your “ROOT” template.
Open up the “Components” section within the “Tool pane“.
Find the “Template” component and drag and drop it on the page.

The template component allows you to load another template as a piece of a bigger template. In essence it allows NoCode-X developers to reuse their templates as building blocks.

Click the dropped “Template” component and open up the “Component” section within the “Tool pane” to access the “Component properties“.
Choose a descriptive and unique “Code” for this component: “TOOLBAR“.
Select “Toolbar component” as the template.

Positioning the toolbar

Within NoCode-X you can position all components for a specific screentype. This allows you to build so called “Responsive layouts”. We will leave this feature for another tutorial and just focus on building our page the same for all screentypes. Select “All screens” in the screentype picker

This selection makes sure you position each component the same for all screens. Once you’ve selected “All screens” you can use the lower row of buttons to change the screentype of the preview of the page. For each component you can define its position in numerous ways, we encourage you to read up on the documentation with regards to component sizing & positioning.

Select the “TOOLBAR” component.
Open up the “Component” section within the “Tool pane“.
Open up the “Style tab“.
Set width to “100 %” and height to “53 px“
Set x and y to “0 px“.
Make sure the component scrolls along when the user does by toggling “Position is fixed“.

Configuring the toolbar

The “Vanilla toolbar” allows you to specify a title, left buttons and right buttons. For the sake of this tutorial we will limit ourselves to configuring the title.

Open up the “properties” tab on the “Component” section within the “Tool pane“.
Change the parameter “Title” to “DeskSculpt Inc.”
Leave the other parameters for what they are.

If you like you can already preview your page by clicking the preview button: “

And the result:

Adding the sidenavigation.

Next, let’s provide a way for our users to navigate our application by adding a sidenavigation to our page.

Access the “Components” section in the “Tool pane” again and drag and drop another “Template” component on your page.
Open up the “Component” section and add a descriptive and unique “Code” for this component: “SIDENAV“
Select “Sidenav component” as the template.

Positioning the sidenavigation

Time to position our sidenavigation. For this application we want our sidenavigation to appear on the left side of the page. We want it to spread across the entire height of the page starting from where the toolbar ends. We also want it to scroll along with the user.

Select the sidenavigation component and open up the “Component” section in the “Tool pane“.
Open up the “Style tab“.
Set width to “2 grid” and height to “100 %“
Set x to “0 px” and y to “53 px“
Make sure the component scrolls along when the user does by toggling “Position is fixed“.

Configuring the sidenavigation

The “Vanilla sidenavigation” allows you to specify a title and some links in your navigation. For each link you will be able to specify a name, an icon, the logic that should be executed when it was clicked & the path on which this link should be visualized as being “active”.

Open up the “Properties” tab
Toggle “show title” to false
Under the navigation parameter click “Add link“.
Set the icon of the link to “home”, which is the name of an icon inside of the Google icon font
Set the name of the link to “Offices”

Congratulations! You’ve now successfully set up a basic webpage with a top toolbar and sidebar navigation on the NoCode-X platform. Although our work is not done yet.

Reusability through application structure

As mentioned before, NoCode-X focuses hard on reusability. It is nice that we can reuse components that have been built in NoCode-X like the sidenavigation and the toolbar but it would be a shame that we would have to repeat the above steps for every page within our application. That’s why we introduced “Template hierarchy“. With “Template hierarchy” you can create parent-child relationships between templates. Every child template will inherit the components and their settings from the parent. Lets use the template we have just created as the “ROOT” of our application and create a child to visualize a “Hello world” message.

Click on the “Template Hierarchy” button in the upper right corner of the “Template editor”
The visualized hierarchy appears. At the moment we only have 1 node, our “ROOT” template.
Click on the “+” button to create a child.
Click on the pencil next to the child to start editing this child.

As you can see this template also includes the sidenavigation and the toolbar. That’s the magic of “Template hierarchy” working! Now lets make some changes to our child template. Lets give it a good name and place our “Hello world” message.

Open up “Template” section in the “Tool pane” and change the name to “Offices template”
Open up the “Components” section and look for the “Title” component
Drag and drop the “Title” component on your page.
Position this title component in the middle of the screen by giving it x: “50 %” and y: “50 %”
Open up the “Properties” tab of this component and provide “Hello world” as the title.

Configuring the sidenavigation link logic

We only have one thing left to do. The link in our sidenavigation should redirect the user of our application to our “Hello world” page. To do this we need to create an “Action“. Actions are sequences of no code functions that are executed by NoCode-X. We can easily put them together by dragging and dropping everything into place.

Head back to the “ROOT” template and select the “Side navigation” component.
Expand the “Offices” link and click on the “+” next to the “link_action” parameter.

A new action is created and automatically linked to the link in your sidenavigation. You’ll see a grid with a function block named “Start”. This is where your logic will start, you can easily drag & drop other function blocks and connect them with each other. The logic will be executed sequentially from “Start” until no block is left. Meaning whatever logic you put in here will be executed when the user clicks the link. For this action the logic is pretty simple, we need to redirect to the “Offices” page.

Open up the “Action attributes” section within the “Tool pane” and give your action a descriptive name “GOTO Hello world page“.
Open up the “Functions” section and search for the “Route to page” function
Drag & drop this into you logic and connect one of the connectors of the “Start” block to this new block.

Click on the “Route to page” block and open up the “Invocation configuration” section in the “Tool pane“.
Select the “Offices template” from the dropdown for the “Template” parameter.

The last step is to indicate that this button should appear as active when the child template is displayed. Upon creating a template by default it receives a random text as a unique path. This is just to make sure this path is unique, you can change this to anything you want as long as it remains unique within your application. Lets head over to our “Offices template” and change the path to “offices”

In our sidenav there is a property we haven’t set yet: “link_active_path“. This feature checks the current URL for a certain pattern and displays our sidenav button as active when this pattern is detected. Lets change this to the path that we configured on our “Offices template” being “offices”.

Head back to the “ROOT” template and select the “Side navigation” component.
Open up the “Component” section in the “Tool pane”
Open up the “Offices” link
Locate the “link_active_path” parameter and give it a value of “offices”.

Done! Let’s preview the modifications made so far. If everything went well, you should now have a clickable button that displays the child page.

Great! That’s a good start. NoCode-X provides several environments for each application. It provides a development, test, accept & production environment that all run independently from eachother. They can potentially run different versions of an application and all have a seperate built-in database & user base. Let’s create our first version of our application.

Click on the truck button on the rightside of the NoCode-X toolbar and select “Create First Version”. We will enter a name and description for this version. Now hit the “Save” button. This version can now be promoted to your test, accept & production environment which will incur some optimizations & make them reachable at different endpoints. For example if your preview endpoint is: https://dev-rental-rental-inc.app.nocode-x.com/offices. Your test endpoint will be https://test-rental-rental-inc.app.nocode-x.com/offices, accept: https://accept-rental-rental-inc.app.nocode-x.com/offices & production: https://rental-rental-inc.app.nocode-x.com/offices

That’s it you’ve created your first Hello world application in NoCode-X! Care for more action? Check out the next tutorial: NoCode-Xcelerate: An overview of offices

Did you notice that all plugins used within this tutorial were built by using NoCode-X? That’s right no code was used to build these plugins want to learn how to build plugins check out these tutorials:

NoCode-Xpert: Building a reusable side navigation component
NoCode-Xpert: Building a reusable toolbar component

NoCode-Xcelerate: #1 Creating your first application