NoCode

NoCode is the way to create the logic of your app. Instead of writing code, you just place items (NoCode Items) and connect those items to each other to make a logic flow. DevPal Studio will produce native codes by analyzing your NoCode when you compile the NoCode.

We call the graph which consists of multiple NoCode items a NoCode Graph.

You can consider a NoCode Graph as a Class in a programming language. It has variables, methods and a class name.

Although you can create custom base NoCode graphs, Alpha Version allows only creating NoCode for an Activity.

Adding NoCode items

When you create an Activity (screen), a NoCode Graph for this activity is automatically created. You can switch to NoCode Graph of an Activity by clicking the NoCode button in the upper right corner of the Design and NoCode window.

NoCode window

Here you'll see a canvas titled Main. This is a NoCode Graph canvas and all the NoCode items will be added to this canvas.

You can zoom in and zoom out NoCode Graph canvas by scroll wheel of your mouse. To pan the canvas hold the scroll wheel button and move it or hold the Control key and move the mouse while holding the left click button.

NoCode items are entities that makes the entire graph together by connecting to each other.

Just right click an empty area on this canvas and a list of items will be displayed. The items and categories displayed in this list depends on some factors like the current NoCode graph's base class, imported NoCode plugins etc.

NoCode menu

You can search this list by typing. To add an item, just press Enter or click an item.

NoCode item

Connecting NoCode items

When you look at a NoCode Item, you'll see a number of pins. Multiple NoCode items can be connected to each other by those pins. Just click and hold left mouse button on a pin, drag it to another pin and release the mouse button.

NoCode connection

There are 2 types of pins:

  • ExecPin Execution Pin: Logic flows from one NoCode to another via execution pins. So, to make a NoCode item a part of the execution logic you need to connect its execution pin at least to another NoCode item.

  • DataPin Data Pin: This pin can be considered as method parameter (input pin) and method result (output pin). These pins hold data and you can connect any other data pin to these pins.

Variables

Variables in NoCode is similar to the variables in any programming languages. They have a data type and hold some data of this type.

To add a new variable, click New variable button, give it a valid name and select the data type of the variable.

NoCode variable

Alpha version limitation

Not all data types of Android framework are included in alpha version. And some data types might not function correctly!

To use this variable in your NoCode graph, just drag and drop the variable from the list to the NoCode graph canvas. Select the appropriate action from the opened menu.

NoCode variable get

  • Get: This will create a NoCode item to read the value of the variable
  • Set: This will create a NoCode item to write a new value to the variable
  • Create new object: This will create a NoCode item to create a new object of this data type and assign it to this variable. This will not apply to basic data types.
  • Get with default event: This will create a NoCode item with the default event of this data type. This will apply to UI data types. e.g. Button, TextView
  • Most used events: Most used events of this data type
  • Most used methods: Most used methods of this data type

For example, if you select the Set it will create a Setter NoCode Item as shown below. You can set a new value directly to the textbox of the pin or connect it to another pin.

NoCode variable set

User Methods

User methods are similar to the methods/functions in programming languages. If you define some NoCode logic in a user method, you can use (call) this user method anywhere in your NoCode graph.

To add a new user method, click New User Method button and give it a valid name.

You can change the name of the user method by clicking the user method item in the list and typing a new name in Properties window.

NoCode user methods

As you see, when you have created a new user method it has two NoCode items by default: a SET item and a RETURN item.

  • SET item: This is the starting point of your user method. You need to connect your first item's input exec pin to this item's output exec pin.

Also, you can define the parameters of the method by this item. To add a parameter, click Add param button. Double click the name of the param to change its name and select a data type for this parameter.

NoCode user method set

You can add multiple parameters: just click Add param button again.

  • RETURN item: This is similar to return statement of programming languages like C or JAVA. Whenever this item is reached, the user method ends and returns to where you call this user method. You can add output parameters for your user method by this item.

NoCode user method return

You can add multiple RETURN items in your user method. For example, if you need to return the user method when a condition occurred. To add an extra RETURN item, just right click on an empty area and select Add RETURN item from the list.

Here is a sample user method with multiple return items

NoCode user method sample

To call a user method, just search for its name in NoCode items list.

The user methods will be displayed under User Methods category in NoCode items list.

NoCode user method call

And when you select the user method, it will be added to the current NoCode graph as shown below.

NoCode user method call