Uiflow
ChangelogPartners | Freshworks
Search
⌃K
Links

Build your first Freshservice app in Uiflow

Overview

Today, we will build a Freshworks app for Freshservice that will do the following,
  • Display the name of the user who is currently logged into Freshservice
  • Display a congratulatory text message!

What you will learn

  • How to use the Uiflow Studio to build a simple app for Freshservice
  • How to navigate the development experience
  • How to publish your app

What you will need

  • A Freshservice subscription with Administrator access for yourself
  • Access to the Uiflow Studio (you should have received access details in your inbox if you were provided access to our Early Access Program)
  • Google Chrome as a Browser

Getting started

Let’s first find our way to the Uiflow Studio as a Freshworks user.
Navigate to the app management portal through the admin settings on your Freshservice Instance.
  1. 1.
    In Freshservice, navigate to left navigation bar and select “Settings”.
  2. 2.
    In the Admin settings page, search and select “Apps”.
  3. 3.
    When App gallery opens up, click on “Open Developer Portal” on the top right corner of your page.
  4. 4.
    Click on “Try Uiflow” to open the Uiflow experience in a new Tab (Remember to sign up for the early access program if you do not have access yet)

Create your First Project

  1. 1.
    Click on “Create Project”
  2. 2.
    Select "Ticket Sidebar" as template
  3. 3.
    Rename it with your desired project name. Eg: Hello World Application
You will now land into the Uiflow studio. Let’s quickly explore 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 — Each element introduced into the app can be configured in three dimensions.
  1. 1.
    Styles — The presentation of how this element is displayed to the user.
  2. 2.
    State — The data that each element carries with it.
  3. 3.
    Actions — The inputs and outputs each element works with. Actions are typically wired with other elements to collectively form the Flow of the app.
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.

Hello World

Let’s gear up to see what our first app development experience feels like.

Setting the stage

Click the settings icon on the top right navigation bar. You will see a dialog containing Publish Settings pop up. Fill in all the necessary information.

Development Preview

Let’s start with something simple. Just imagine a UI with the text “Hello World” on it.
  1. 1.
    Find a “Text” element from the component catalog, and drag it into the Flow Panel.
  2. 2.
    Change the current state of data in the Text component to “Hello World” and select “H1” to display this as Header-sized text.
  3. 3.
    Click Save.
  4. 4.
    Click Build to mirror your current development work into Freshservice. You will notice an app appearing in the “In development” section of the app gallery in Freshservice. Click on ‘Install’ to complete the installation.
  5. 5.
    Navigate to the Ticket Details page of any ticket in your account and append “?dev=true” in the address bar of your browser. This will help Freshservice render a live mirror of the app you are building in Uiflow.
  6. 6.
    You should now see your app rendering in the ticket side bar in Freshservice. Expand it to see it work. Leave this tab open. We will get back to it later.
Before moving to the next section, remove the Text element we just added to present “Hello World” text. Let’s step up a bit with our app.

Building Your First App

Sketching the requirements

Let’s start by imagining what we want to build.
We want to greet users logged into Freshservice using our app rendering in the ticket sidebar.
To accomplish this we will need
  • One interesting Image
  • One string of Dynamic Text — The message is personalised to refer to whoever is currently logged into Freshservice
  • One string of Static Text — A message of appreciation for ourselves!

Working with elements

Let’s use the Elements panel and pull in the relevant Elements.
  1. 1.
    Search for “Get Logged In User” in the Elements panel and drop it in the Flow panel once you find it. “Get Logged In User” is a stateful element and is therefore represented using Green. Stateful elements can retain and discard information as required. As a developer, you can configure the state information for such elements using the “State” tab in the Inspector Panel. Specifically, “Get Logged In User” will output the information about the current user logged into Freshservice.
  2. 2.
    Search for “Get Value at Path”. “Get Value at Path” is a logic element and is represented using Gray. Logic elements help define the business logic of our apps, in this case helping us modify data that flows through the elements in the Flow panel before they appear in the User Interface (via UI Elements). Specifically, “Get Value at Path” will help us grab the information we are interested in among everything else.
  3. 3.
    Search for “Container” Element under the UI section. “Container” is a UI element that is represented using Blue. UI Elements help us build an interactive visual experience as part of our app. Specifically, “Container” will help us place UI elements such as Text or Image properly on our app’s canvas. Let’s go on to refer to the Container as “Hello World UI” by relabelling the element title from the inspector panel.
Now that we have a “Container” in place, let’s double-click it and place some additional elements within the Container — One Icon Element and Two Text UI Elements. As we did earlier with our first Text element, you can change the current information that any UI Elements display by playing around with options in the State tab of the Inspector Panel.
  1. 1.
    Select the Icon UI Element and paste the following into the SVG input box -
    <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 100 100"><text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-size="100">🚀</text></svg>
  2. 2.
    Select the first of the Text UI elements you just added and add a “setLabel” Action to it from the “All Actions” pane in the Inspector panel. By adding an action, we are enabling the Element to wait for an event to occur and perform an action in response. Remember, we want to see “Hello AgentName!” in the ticket sidebar where AgentName is substituted dynamically. Likewise, “label” is another input that take in data into UI Element and render it to the user.
  3. 3.
    Select the next Text UI element and add the “activate” action to it. You can rename the UI element itself to “Congrats” making it easy to remember why you added this element.

Working with flow

Remember, we want a user to open the app so that it wishes them “Hello” and congratulates them (ourselves actually) for building this first app. Looking closer, this can be further broken down into the following steps:
  1. 1.
    When the app renders, a rocket image should be displayed.
  2. 2.
    The app should dynamically understand who the user is and display their name.
  3. 3.
    The app should display a text that says “Congratulations, on building your first app with Uiflow”.
This should help us wire the elements together.
You can use your mouse pointer and click from one input to another element. Let’s call this the interfacing of two nodes. When this interfacing wire connects to a call (an input trigger for an element), it turns purple; if it sends data from one element to another it turns gray.
Freshservice will emit an onInitialized event to our Freshworks app when the app loads in the Freshservice page for the first time. From here on, Freshservice will only emit an onActivated event when the user opens the app in the ticket sidebar, and an onDeactivated event when the user closes the app.
Let’s wire some of the elements together using the principles we just learned.
  1. 1.
    For both the onInitialized and onActivated events, we want the app to primary flow. We pull a purple wire from these events to call the _Get Logged In User _ stateful element. The Logged In User element emits an onSuccess event and data.
  2. 2.
    The data that the Logged In User element outputs looks like an object. Eg: { “loggedInUser”:{ “agent”: { “id”:1, "created_at": "2017-10-26T19:40:13+05:30", “user”:{ “email”: “[email protected]”, “name”: “mickey” } }, “group_ids”: [] } }
  3. 3.
    Since we only need the “name” property from this data object, we will use “Get Value at Path” to pick the desired data.
  4. 4.
    The “Hello World UI” Container should know when and what should be displayed to the user. Wire the input connection of the “Congrats” UI element to the outer edge of the “Hello World UI” Container to enable other elements to trigger the inputs of the elements in the Container.
  5. 5.
    Similarly, wire the “label” data connection point to the outer edge of the “Hello World” container to enable other elements to send data to it.
  6. 6.
    As a result, Text.label, Text.setLabel, and Congrats.activate are now accessible outside the Container too.
The approach that each element does it’s own job allows us to reuse the components in ways we would want to.
Let’s think about the nature of the data and calls that flow across the components.
  1. 1.
    Select the “Get Value at Path” element and navigate to the Actions tab. Specify loggedInUser.user.name for the path property to grab the specific data that we need to pass to the “Hello World UI” Container.
  2. 2.
    In the “Hello World UI” container, remove all the existing connections so that we can bring new logic components into the container.
    1. 1.
      A “String Template” element substitutes certain parts of the data that it receives dynamically with other values and passes the data to the next element. We will use it to to append “Hello” before the logged in user’s name.
    2. 2.
      A “Sequence” element receives calls and makes sure to call the following elements in the order specified. Here, we want to display “Hello Agentname” first, followed by “Congratulations! You built your first app with UiFlow!”. The “activate” action in the “Congrats” element makes it visible to the user in the UI.
  3. 3.
    Now, wire the input connections of the String Template and Sequence containers to the outer edge of the Hello World Container to enable other elements to trigger the inputs of the Container.
  4. 4.
    Finally, wire the Container’s inputs with the rest of the flow. The Hello Agentname input needs the output from the Get Value at Path element, so wire them up. Similarly, the Sequence of rendering the Text elements must be triggered once the Get Logged In User data is retrieved successfully. Wire the onSuccess output of the Get Logged In User element with the Sequence.call input in the Container.
Now that everything is wired up and ready, we can now go ahead and mirror our app.

Development Version

You can publish a development version of your applications before shipping it to your users. To do this, select the 🚀 icon on the top right corner of the screen and publish to live mirror. Switch over to the Freshservice account and append ?dev=true to see your final iteration of the app we’ve made.
In case, you happen to make any changes to the Publish settings, update the app from the app gallery after publishing to the Live Mirror.

Congratulations 👏🏻 !

You’ve built your first app for Freshservice using low code!
You learned:
  • How to use the Studio and the Panels within the Studio.
  • The 3 types of elements in the Studio (stateful, logical and UI) and how to use them
  • The types of input and output nodes (events, calls, data) that elements support and how to wire them together in the flow panel.
  • How to work with a live mirror development version of your app in Freshservice.
  • How to manage the properties of each element using the Inspector panel.
We hope this experience will help you gain the necessary confidence to play around with the studio further and start imagining how you can solve your business problems using Freshworks and Uiflow.
Once again, Kudos 🙌!
Previous
GitHub issues tracker Freshservice app
Next - Learning & support
Contact us
Last modified 1mo ago