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.



GPqqAB-Svy8j5lYcpOQC2TDvFQ3hvYDgfA.png







Adding Components


On the left side, click the component icon with a small plus sign to open the Component Browser.



p7MBiwAKwBrJ5RKPsn6W5mLfCGN2aUSBpQ.png



Once you find the component you want, click and drag a component into the dataflow canvas to use it. Or double click on it.

24rxwJ7f5IAT3_eJYh_oz1mZlFxfPllqCA.png



Ports and Wires


You build Xaps by wiring Components together into a dataflow. The dataflow wires connect to the Components' ports.



There are input ports (a.k.a. inputs) and output puts (a.k.a. outputs). Inputs are on the left side of a component. Outputs are on the right. Which outputs should lead to which inputs depends on the components and their relationship to each other in the Xap. The component documentation (see below) is the best place to look for info on what a port does


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.



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. 


Clicking on an icon accesses functionality. The information icon opens the component's documentation. The light bulb will open the Cognitive Network (coming soon!) for that component. The pencil opens the Component Editor so you can edit the component if you have permission. The equalizer icon allows you to adjust Component Settings, which define information about the server-side environment that the components run in. The trash can deletes the component. (It does not make Oscar appear. It deletes the component from the dataflow. So be careful with that one, lest you become the grouch.) 

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. 5QuYpUdnc16DNi35MW-84sQmd_a-eO9-2A.png

Merge Gates (a.k.a. Data Gates)



Click the merging arrows icon in the bottom left of the data flow to add a merge gate. There are separate articles covering how merge gates work.


t6VAuC34D8xZc9skPaNg1XDvstCIWOa5Qg.jpg


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. 




C7Z9PdN4x4mBRhKJLUIjWeYDxjEXMFy7yQ.png







Component Groups


You can group components and condense them in the DATAFLOW to save space and clean up your canvas. This often makes sense when a collection of components combine to perform a function. You can group them and compress the group to save space. Then you can expand the group when you want to work with the individual components. 

To create a group, select the components by holding SHIFT and clicking on each component. You'll see their edges highlight in blue and a box form around them. Then click on the + icon to "add group." Once created, it will compress into what looks like one component. Double click to expand it.


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.) 


WARNING: Clicking remove group removes the components in it too! If you want to ungroup, drag the components out of the box. 




Tools Menu


The Tools menu in the upper right contains xap-level features used when embedding a xap in another web page.

Xap Log


Click this icon in the lower left of the dataflow. 

MuokhWTihZu_rAPb871CVUFhGu2zlnffqw.png


It opens the xap log for debugging

LLDDRFF1v9zYfbQoZhcvFCzxEK32bPiBMQ.png