When building Xaps you'll spend most of your time in the DATAFLOW section of your Studio. This article will walk through the basics of that user interface. We recommend reading about Fundamental Concepts before going through this article.
Adding Components
Ports and Wires
You build Xaps by wiring Components together into a dataflow. The dataflow wires connect to the Components' ports.
Wire Manipulation
To place a wire, click on its port of origination. Drag it to its destination. Let go of the cursor to place it.
To move a wire, click on the wire. (It will highlight in bold if you've done so successfully.) Click on the port from which you want to take it, and drag it to its new destination.
.gif?1475693038)
To delete a wire, click on the wire. Hit delete on your keyboard.
NOTE: The wire will highlight in blue when you are hovering over it. It will stay bold in blue when you've successfully clicked on it.
Component Tool Bar (Documentation, Editing, Settings)
If you hover over a component, a tool bar will appear below it.
Component Configuration
Click on a port or double-click the component to expand the component. You can then expand individual ports to access their configuration tools by clicking on the bar next to the port. In this example the Table component is expanded and the data input of the component is expanded.
Depending on a ports purpose and the architecture of the component, you'll see different fields available for configuration inside each port. Configuration may require editing JSON or writing a brief expression. Each component will have different purposes and work in different ways.
One of your two primary tools for understanding how to configure a component is the component documentation, available via the information icon that appears while hovering over a collapsed component or in the ellipsis in the upper right of an expanded component.
There is also documentation for configuring components and many types of ports you will encounter.
Data Viewing and Editing
Once you've expanded a component, if you hover over the data bar next to a port, you'll see an edit icon (box and pencil). Clicking on that icon will open a larger window where you can view the data in that port in either JSON or in a table. You can also edit the data in that window and send it into the data flow.
Here is the data viewing and editing window at the bottom of the DATAFLOW canvas.
Port Tools - Send, persist, and clear data
Click on a port or double-click the component to expand it. If you hover over the port you want to work with ellipsis will appear. Or, if the port has a box next to it, click the box for the port you want to work with to expand it. There you'll find the ellipsis.
Clicking the arrow sends the data in the port through the dataflow.
When a component's input receives data, whether from another component or entered by hand, you have the option to have that data persist, not persist, or to clear it. Components default to persist. With "persist" checked, the value will persist even if you close the xap. When you open it, the value will reload in that input. Click "persist" to uncheck it, if you would like the value in that input to clear when you close the xap. The next time you open the xap, no value will load. Click "clear" to clear the value right away. 
Merge Gates (a.k.a. Data Gates)
Adding Annotations
Click the T icon (just below the merge gates icon) to add an annotation to your Xap. Once clicked, an template text box will appear. Double click to open it, get help on annotations, or delete it.
Component Groups
You can add or remove components from a group while it's expanded. Just drag them into the box to add. Drag them out of the box to the left to remove. (Dragging to the right expands the box.)
Tools Menu
Xap Log
