Overview
Uiflow and Freshworks believe that you should be able to “Build software at the speed of thought”. Our vision with low-code is to really make it easier to build applications by abstracting many concepts used in programming while still aspiring to offer a very powerful tool for app developers.
At first glance, the Uiflow Studio might remind the gamer in you of a flight simulator where you are faced with a lot of controls. Understanding each section and using them at least once will help you get used to this interface. Over time, continued use should help you develop “muscle memory” so you don’t even have to think about where to look for something.
The studio is where you interactively design and build your app. You will likely spend most of your time here, working with elements, visualizing your app, wiring up the business logic, and iterating over revisions of your app as you make it better all the time.
Let's go ahead and take a closer look into the Studio!
There are broadly four parts that constitute the studio.
Elements Panel — A Catalog tab lists the Elements that you can use to construct your app. A Tree tab lists the Elements you use in a hierarchy making it easier for you to rearrange the Elements.
Flow Panel — Captures the flow of the logic and the functionality that defines how your app behaves and uses Elements from the Elements panel.
Inspector Panel — From the Inspector Panel, each element introduced into the app can be configured in three dimensions - Styles, State, and Actions.
Preview Panel — All visual elements can be quickly previewed in the preview panel. This section allows you to see what your app will look like even before you have published it.
Elements are the building blocks of your app and represent visible and functional features of your app. Visible features include visual elements like text, buttons, and images, while functional elements typically perform logical operations like getting some value from within a string, or performing a specific function like making an API request.
A number of Freshworks elements are also available to introduce features that are specific to the Freshworks platform, such as Get Ticket Details, Get Installation Parameters, Access Key-Value Data Store, and so on.
You can search for any element by name from the Elements catalog and drag them into the Flow Panel. Go ahead. Try it!
There are 3 primary element types available in the Catalog. We encourage you to try finding and dragging them onto the Flow Panel to appreciate how they look.
- 1.UI Elements depicted in blue and represent visual elements that usually map to HTML. Eg: Text, Icon, Button.
- 2.Logic Elements depicted in gray and represent logical actions your app may want to perform. These elements are usually stateless, meaning they do not retain information across invocations. Eg: Get Value at Path, String Template, Substring.
- 3.Stateful Elements depicted in green and covering elements that retain state and can be used to hold and represent information in the app. Eg: Get Ticket Details, Access Key-Value Data Store, Get Logged In User.
Most of the elements in the Uiflow Studio carry reference documentation with them to help quickly appreciate how to use them. To access this documentation, right-click an element in the catalog and select View Component Info or use Cmd + K (on Mac) or Ctrl + K (on Windows & Linux) keyboard shortcut.
Just like with the Elements catalog, you can search for elements here and refer to their documentation.
Now that we have looked at a few elements, let’s appreciate what we can achieve through the Inspector panel. Let’s pull in a simple visual element, say “Text”, from the catalog onto the Flow Panel.
As described earlier, there are 3 dimensions in which we can configure an element.
The Styles tab controls the presentation of how this element is displayed to the user. Try changing the Layout of this Text element by having it center on the canvas or align right or left. You can note the change being immediately visible in the Preview panel.
The State tab helps configure the data that each element carries with it. Try modifying the label and type values for the Text element, and note how it updates in the Preview panel.
The Actions tab helps configure the inputs and outputs each element works with. Actions are typically wired with other elements to collectively form the Flow of the app. We will look at this closer in the next section. For now, try to add a “setLabel” action to the element and note how it shows up in the Flow panel.
The primary business logic (both visual and otherwise) of your app is captured using the powerful Uiflow Flowlang. Let’s look closer at the important concepts involved here to help you describe your app’s business logic in the Studio.
Each element in the Flow Panel has a set of input and output nodes that are designed to enable wiring them up using connections with other elements.
Let’s pull in a “Get Value from Path” element from the catalog as an example. On the left, the element has 2 input nodes - “object” and “path” - representing the JSON object to fetch the value from and the path to use to fetch the value. On the right, this element has one output node - “value” - representing the outcome of its operation of fetching a value from the path.
Let’s pull in another element to try and wire up nodes. This time, pull in a “Get Logged In User” element from the catalog. On the left, the element has a “call” input node that can be used to trigger the action this element performs. On the right, you will find 2 sets of nodes - “onSuccess” and “data”, “onError” and “error”. When the operation performed by this element is successful, it will emit an “onSuccess” event depicting the operation was successful, along with the “data” regarding the Logged In User. On the other hand, if the operation fails for some reason, it will emit an “onError” event along with details of the “error” that occurred.
To cover all element types, let’s also pull in a “Text” element as well. From the Inspector panel, use the Actions tab to add the “setLabel” action for this element. You will note that 2 input nodes - “setLabel” and “label” - will now show up for this element.
Besides being categorized as input/output, nodes can further be classified as follows.
Call/Trigger Nodes
As the name suggests, Call/Trigger nodes act as connectors for one element calling or triggering an action offered by another element. In the elements, we pulled above, “call”, “onSuccess”, “onError”, and “setLabel” are nodes of this type.
Call nodes are typically input nodes (“call” and “setLabel”).
Trigger nodes are typically output nodes informing a downstream element that something occurred or was completed (“onSuccess”, “onError”).
Data Nodes
Data nodes expose data inputs or outputs related to a component. In our example elements, we have “object”, “path”, “value”, “data”, “error”, and “label” representing this type.
There are primarily two types of connections that can be wired between elements in the Flow panel. These connection types are directly related to the purpose of each node they connect to.
Call Connections
Connections between an outgoing trigger from an element to an input call of another element are called Call connections and are depicted in Purple. Think of them as electric wires that connect elements together so they can work together. A call/trigger node can only be connected with another call/trigger node.
Data Connections
Connections between data nodes are called data connections and are depicted in Gray. Think of them as the conveyor belts that transfer data between one element and another. A data connection can only be connected to a data node of the same data type.
If the data types do not match, you may use any of the data transformation elements to convert from one type to another supported type. For example, get a String value from an Object using the “Get Value for Key” transformation element and pass the String value to a “Substring” element that expects a String input.
Any app you develop first needs to be tested in a development environment and then published in a production environment where other users can start using it.
A Live Mirror helps you run the app in a development environment without affecting any other users and helps you iterate through changes in your app faster by allowing you to quickly review the changes you make to your app. You are encouraged to have the Uiflow Studio and your Freshdesk/Freshservice page open side-by-side in the browser when testing using the Live Mirror.
Note: If publish settings for your app are updated, you will need to republish a new Live Mirror.
When an app is published (to production), it is saved as a new Draft version in Freshworks. You will need to visit the Freshworks Developer Portal to publish the app to production from Draft after updating any additional information related to the app listing.
Every app has its own Publish Settings that describe important properties related to the app listing as well as those related to the security and configuration of the app.
An app on the Freshworks platform works within a Freshdesk/Freshservice page and must cooperate with the user interface it loads within. One important cooperation is related to the lifecycle of the app within a page, which is associated with 3 events -
- 1.onAppInitialised: When the app is initialized for the first time on a given page.
- 2.onAppActivated: Each time an app is activated through user interaction.
- 3.onAppUninitialised: When the user navigates to a different page where the app does not load.
Every Freshworks app is typically contained within a container that has these 3 events as inputs. A typical app will not really need to behave differently for one of these events. It is however possible to respond to any of these events with a different Flow in your app.
Similarly, these events may trigger differently depending on where the app loads within Freshdesk/Freshservice. Refer to the Freshdesk or Freshservice documentation for more details.
At times, your app will not work as you expected it to. When you need to troubleshoot your app, the Console element is your best friend. Simply add the Console element from the elements panel and connect it to any of the Trigger or Data nodes that you want to look closer at.
You should always expect your app to fail, and be prepared for it. Many elements offer an onError output trigger to denote that the operation they were trying to perform has failed. It is recommended you connect a Console element to each of these onError triggers to capture why they failed if they ever do fail.
When the Console element logs something, the error appears in the browser’s console and can be viewed using the browser’s built-in developer tools. The “View Logs” panel from the bottom of the Studio will also capture the logs generated by the app.
We have put together a set of handy tutorials for you to get started with developing apps for Freshworks using Uiflow. Follow these tutorials and get started today!
Last modified 1mo ago