This document provides instructions for creating a basic travel request application (APP) in Qalcwise. It describes placing spreadsheet and data entry sections on the design canvas. Formulas are used to make cells editable, add dropdowns and date pickers, and conditionally show/hide sections. The tutorial APP allows requesting travel purpose, dates, customer details, and advance payment. It demonstrates core Qalcwise APP design features like formulas, responsive design, and conditional formatting.

1. B u s i n e s s A p p l i c a t i o n s C l o u d
Designing
Business
Apps Unit 110 - Introduction
to Designer
v.20160220

2. B u s i n e s s A p p l i c a t i o n s C l o u d
Designing Business Apps
What’s inside
In this tutorial you will create your first (simple) Qalcwise app. By doing that you will learn about most of Qalcwise features.
What’s required
Well, it would be good that you have Qalcwise subscription already (Qalcwise Site) and you are defined as Designer at that site.
We assume, you are familiar with Qalcwise Workspace as a user or you are familiar with Intro to Qalcwise Workspace tutorial.
A knowledge of spreadsheets and spreadsheets formulas is highly reommended.
How long it takes
Approx. 2-4h depending on how distracted by environment you’ll be .
Notation used
There is no special notation used in this Tutorial. It’s a free-form exercise. It might be useful to pay attention to Green rectangles and arrows as they point to things
in subject.
What’s not inside
This tutorial talks about basics and leaves even more fun and Qalcwise power for later. Check other tutorials for Working with Data, advanced Workflow, Charting
and much more.
HAVE FUN!

3. Qalcwise
is
Business
Applications
Cloud
Platform
A place in Cloud where you can
collaborate
and communicate
with your coworkers by means
of business applications.
My Busines Apps

4. Qalcwise Business Apps
With qalcwise, you can create your
own applications or acuire apps from
Qalcwise App Marketplace
Qalcwise App Marketplace

5. What you can do with Qalcwise
Communicate, collaborate with your, teams, departments, company
wide or directly with your colleagues. Share messages, tasks, files,
reminders, comment on discussions. Run surveys & reviews. Focus
on only important tasks with Qalcwise peace making „Focus” switch.
Advanced Search through platform content.
Run workflow enables communication via Business Applications.
Issue request, obtain approval, discuss numbers, manage data. Drive
process based business communication.
Design your own Business Applications with ease of spreadsheet like
formulas. No coding required. Unprecedented approach to business
apps design where business users can create Apps by themselves.
Acquire or Sell your business apps on Qalcwise Apps Marketplace!

6. Let’s meet Qalcwise
… Designer!

7. Qalcwise Workspace
Qalcwise
Qalcwise Designer
This is where applications run
and all the collaboration and communication take place
This is where we (You) design the apps.

8. The Elements of Qalwise Designer

9. Home logo
Always brings you
to your Work Board.
It will exit the Design
Mode
Designer Mode
Streams are available
in Design mode
To organize your APPs
And Data.
Qalcwise Collaboration Workspace

10. Once in Designer Mode
you will see this screen.
Your screen is probabbly
empty because you have no
apps yet!
Let’s not wait!
Click the „Create new app
button.”
1. You have probably noticed, that Streams
are the same in Workspace and Design
mode. You can use them to sort your apps.
2. There are 2 additional streams on the
drawer: Unassigned and System. All apps
that you create and not assign to any
Stream will be placed in „Unassigned”.
3. „System” stream holds system Apps
and system Data lists and Tables.
4. There is more buttons on top but we do
not cover them here in this tutorial. Please
check other tutorials for Working with Data
(Lists, Tables, Import) and creating your
own commercial Apps and porting apps
between Qalcwise sites (Packages).
5. Use Search often! This is very useful
when working with many apps and data
tables. Really useful stuff.
6. When designing apps with your peers,,
you can leave comments and
communicate in design proces.
7. In order to assign app to a stream
simply drag this onto the Stream or Stream
onto the App. For sake of this tutorial we
created a Stream called TEM. This is where
our App will be placed.
Go Ahead!
Create a new App and call it
TEM.
* In case, this APP name is taken use
another name. Qalcwise APP names must
be unique. Including those, you acquire
from Qalcwise Applications Market.

12. Well,… it’s empty. Let’s see what we have here.

13. App Design – Workflow Tabs
Designer Canvas Toolbox, Data and Properties
We will learn about those buttons

14. 2. Workflow tab. This is where we design
Who-Does-What-And-When.
(how our App flow between people).
We will come to this in the second part of
this Tutorial.
1. Designer tab. This is where we define
how our App looks and what it does. Data
entry, display, charts and some other cool
stuff a Business App should do. We will
start here.

15. Toolbox
On the right side you’ll find 4 tabs
1. First one, called „Info” contains information about your APP.
2. Second, „Widgets” stores the visual components of the
APP.
3. Third, „Data” gives your APP access to central data. Those
imported and those generated by other APP. APPs share
data.
4. The forth, „Properies” allows to define parameters and
behaviours of your APP components.

16. WIDGETS
2. The palette of widgets is constantly
updated by Qalcwise guys.
1. Spreadsheet widget is the base of the
APP design.

17. DATA
2. Actually, as you will learn later, an APP is
also seen as data available to other APPs.
This is really cool feature.
1. Your data are available to all your apps. 3. Data is either imported from files or can
be uploaded via API’s.

18. Properties
1. They are specific to your Design elements.
2. Except ‚Name’, ‚Visibility’ and ‚Hide Mode’,
which are common to all elements of Design.
(to all „Sections”).
3. All properties, where you see ‚=formula’ can
be calculated with spreadsheet like formulas.
Soon you will see how cool that is! .

19. Placing widgets on your Design
1. Drag wigdets onto the Designer area.
2. Once you drag them they become Sections.
4. Sections are placed in rows. You can drag
rows to change their order. Use the icon in the
corner.
Just drag them and drop
3.They are automaticaly named and
numbered.
5. Your design is responsive! Drag a couple of
sections and see what happens.
5. Because APP are expected to run on mobile
devices, Qalcwise does not use large
traditional spreadsheets. Rather then that
Qalcwise preferes a set of smaller sections.
Yes, you can do calculations between sections
as well.

20. Let’s build our first Qalwise APP
But where to start?

21. It always begins with a Story.
Once you will get comfortable with Qalcwise APP design, you will see that many business processes, business functions, business
needs can be addressed and solved with Qalcwise APP. Immediate.
As a general rule, if your company or organization is struggling with managing business processes with traditional file-flying-
spreadsheets sent from one person to another, Qalcwise is a natural cure.
For purpose of this Tutorial we will take a look at a process for Travel and Expense management. At first let’s consider a travel
request. For learning purposes we’ll make it as simple as possible but at the same time we will cover most of Qalcwise features and
techniques.
Once we will master Qalcwise Designer, it will be very easy to prepare a robust, fully featured system including Expense settlement,
reporting and analysis.
Let’s begin.

22. Story: Travel and Expense Management
• Our team travels a lot. Our sales reps are travelling to customers, our support department also travels often. We also
have remote branch offices, so some travel is related to internal projects.
• Before I travel, I prepare an Excel with travel purpose and some other data, I send it to Alice for her acceptance.
• If I travel to a customer site for sales purposes, I need to provide justification declaring potential business case.
• There are literally hundreds of excels flying monthly on e-mail related to travel and expense management.
• We also need to compare our travel spending to assigned monthly budget as well as provide monthly expense
forecast to our finance department.
• When travelling to our external branch offices, we are allowed to book only certain hotels at a given corporate rate, so
if this is an option, the APP should allow monitoring that.
• At the end of day all expenses go to our admin services. They check, collect and reconcile that and prepare financials
for Accounting.
• We are missing information on how much is spent on sales, support or internal activities trips. An analysis would help
a lot.
• Very often an information about who-is-where on a given date is impossible to gather.
Travel Request Business APP

23. Our new APP called TEM
1. Create a Stream called TEM.
2. Switch to Designer Mode.
3. Click Create new application.
4. Name it TEM.
5. Click OK and you are moved to AP Design View.
6. The APP is Empty
7. Open the left drawer.
8. Click stream called Unassigned to quit the APP.
9. Click Search and start typing TEM
10. Your APP (TEM) is here.
11. Drag TEM Stream onto your APP or your APP onto TEM Stream
12. Clik your App to start Design
We will use the previously created APP
but you can repeat this Exercise if needed.

24. Sure, it’s still empty. Let’s change that, but first we will learn about APP Info. The tab on the right.

25. 1. Click on Info tab on the right panel.
2. It’s always a good idea to prepare a meaningful APP Caption. This is what
users will see when starting a Travel Request.
3. Spending a minute on puting down the app purpose is also a good practice.
Let’s help people use our APP.
4. As you can see at the bottom, your APP is assigned to TEM stream. It can be
assigned to multiple streams.
5. The rest of APP parameters we will cover later.
Update APP info.

26. Good. Now, let’s place our first section onto the Design area.
1. Drag a Spreadsheet from Widget panel
2. You can see, our section is now called .section1’.

27. 1. Spreadsheet Section1 will serve us our main request form.
2. Please right-click the spreadsheet and add 3 rows
3. Fill the spreadsheet as you can see on the ritgh.
4. We will skip coloring and formating in our tutorial.
Spreadsheet as main request form.

28. Cell types
1. Qalcwise you need to say what type is a cel.
2. This is a major difference between Qalcwise and traditional
spreadsheets.
3. It happens so, because a set of our APP-Documents will serve as a
database for many other applications. Therefore we need to know
apriori what type of data is in this given cel.
4. The default Type is Text.
5. An icon in right upper corner shows what type is each cel
6. You can switch on and off this icon by pressing ‚Types’ button.
7. Further on we will change the types of cells as needed.

29. Formulas and functions
1. Qalcwise uses formulas as main APP design technique.
2. Click cells while editing formula to add them
3. Formulas are similar to all traditional spreadsheets except that, if you
want to address another section you need to name it. Eg.
=section1.A1+section2.B2
Spreadsheet like formula-based APP design is unique Qalcwise paradigm.

30. Functions
1. Because Qalcwise is enabled with workflow and a database, workflow
related functions play very important role and are used often.
2. In our example please enter the following function in cell B2 of our
section1
=CreatedBy()
Spreadsheet like formula-based APP design is unique Qalcwise paradigm.
3. Find ‚Preview’ button and see how your formula works.
4. Check also „Headers” and „Formulas” buttons on the top bar.

31. Power of Qalcwise functions
Qalcwise provides some additional functions you will not find in traditional spreadsheets.
Press Help button and browse through Qalcwise functions.
Just to provide some examples:
CurrentState() – tells about status of APP
processing
CurrentUserName() – provides the name of
currently editing user
Find() – searches through arrays of values
IsMobile() – tells whether an APP is being edited on
a mobile device.
Lookup() and LookupValue() – provide a
completely new dimension to data processing in
spreadsheets. (see Tutorial – Working With Data)
There is also a whole family of workflow state related
functions in Qalcwise. Just type ‚state’ in help’s Search
field.

32. Make cells editable
1. This is another major difference between Qalcwise and traditional
spreadsheet. In Qalcwise, cells are by default not editable. This helps
a lot controlling the business workflow,
2. In our example we want the second field to be editable. Please select
(click) section1.B3 and check Editable in Cell properties.
3. You might also want to change display Style to Input in this cell
properties.
4. Please add a Hint for users on how to fill this input cell. You will find
this cell setting in Properties pane.
5. Click Preview to check the results.

33. Dropdowns
1. Dropdowns are easy in Qalcwise.
2. The easiest way is to drag a Data Field from Data panel and that’s it.
This, however you can practice in Tutorial „Working with Data”.
3. Here we will use function ARRAY()
4. Please select the ‚Purpose’ field and set Data type to
Dropdown.
5. Add dropdown items like this
6. = ARRAY(‚Sales’, ‚Support’, ‚Internal
Project’)
7. And we’re done!
8. Remember about quotes around the dropdown item texts.
9. Remember to make this field Editable and set display to Input.
10. Now check your results. Click Preview! Cool!

34. Playing with Section hiding
1. One of the coolest Qalcwise features is ability to show and hide parts of your app using formulas!!!
2. Take a look. Please add a second Spreadsheet section to our design in the same row as Section1.
3. Leave only 2 rows and 2 columns and remove the others.
4. Fill captions like on the screen below
5. And set column B to numer data type, editable and style of Input.
6. This section will serve for entry of Customer and deal details, but…..this makes sense only if Purpose
of the trip is Sales!
7. Therefore, we will set this section visibility using familiar if() formula.
8. Enter the formula in section2 Visibility property
9. =if(section1.B4=‚Sales’, TRUE, FALSE)
10. Quickly check the Preview. Choose the trip purpose as Sales. See what happens.
11. This gives a lot of cool interactive possibilities .

35. Responsive Design. Responsive design of Qalcwise allows using APPs on mobile devices.
Please try to resize your browser window to simulate a smaller screen of a smartphone (or tablet?). See what happens with sections layout. They float.
You can also design your apps by telling which sections are visible on mobile devices. All you need is to set sections visibility using =IsMobile() formula.
Some APPs are meant to run only on large screens. For those go to APP Info tab and choose required visibility.
At the end of this Tutorial you might want to play with your to fit it on you mobile screen .

36. Date Pickers.
You may also set a cell to contain a date.
Let’s set Departure and Return date fields as date pickers.
Don’t forget to make them editable and of course check the results on preview.

37. Formulas between sections.
Let’s add a third section where we will calculated the duration of the trip. Drag it from widgets panel, leave just on row and remove others. This section is
automaticaly numbered as section3.
In cell B1 of secction3 we make a simple formula =section1.B6-section1.B5. This will calculate the difference between return and departure dates in days.
We don’t set this field as editable but please remember to set this field as number.
You can also play with showing this section only when return date is entered. Use isempty()formula as shown below. Check results with preview.

38. Checkboxes.
Our APP will also allow requesting an advance cash allowance.
For that let’s define „advance cell” (section1.B7) as editable
And its Data Type as checkbox..
Please add one more section to our APP to allow Amount entry
and define allowance currency. This will be section4 as shown
below.
Currency cell will be of type Dropdown with items
=ARRAY('USD','EUR','GBP')
Both fields must be editable.
Section4 will only be visible if the checkbox is marked. Click on visibility property of
secction4, type ‚=‚ and then click on our checkbox cell (section1.B7). That’s it. Checkbox cells
are always TRUE or FALSE, so there is no need for ‚if’ formula.
Check the results on preview.

39. Now we have our first APP.
It’s simple and no colored, but it’s already interactive and allows entry of our basic required data related to a
corporate travel request. Later on we will make it more advanced and even more attractive.

40. Add more spice
Later you will learn how to add
centralised data, financial info like
expense budgets, expense recording,
hotel choice, policy check, file
attachments like receipt scans and
some analytical dashboarding.
But now,…
Let’s give it to
people!

41. Let people use our APP
Adding Worflow

42. Creators
Editors
Readers
First, you must know there are three types of people
Creators can run the app from their app launch screen.
Editors can edit app content at a given stage of workflow.
Readers can view APP data.

43. DEFINE APP CREATORS
2. You may add individual persons or
Groups.
1. To add app creators go to App Info
properties and start typing in the field
„Add creators”.
3. Groups are defined by your qalcwise
site admin. You can learn how to do it in
Qalcwise Admin Tutorial.
4. Add your users and don’t forget to add
yourself as one of the app creators.

44. APP Info
2. Show formulas – enables „formula hint”
to end users.
1. App Visibility – tells whether APP should
be available to users, hidden or available
only to desktop users.
3. Alignement parameter relates to your
sections alignement on screen.
4. To choose the right icon for your APP
it’s good to use the icon search.
5. APP type Instance says that new APP
document will be created every time the
app is run. Most of APPs will be of this
type. Check advanced tutorials to know
more about APP types. Our travel request
APP is an „instance” app. A new travel
request document is created every time
the app is run.
6. You will learn more about APP
KPI’s in more advanced Tutorials.

45. Let’s switch to workflow tab now.

46. Start:
Request Travel
In approval
At Cynthia’s
Approved
Or
Rejected
They request travel
(creators)
Cynthia approves
requests
she’s the approver
This is what I want

47. To define our workflow we need to
a)Add boxes
b)Add lines between boxes
Boxes are workflow STATES
Arrows are workflow ACTIONS

48. Step 1 - Add boxes (workflow states).
Let’s add our workflow states as shown below. It’s a drag and drop operation.
Please name them respectively. Use name field in State properties pane.
STATES

49. Step 2 - Add lines. (workflow actions)
Connect the workflow states with actions as shown below.
Please name the arrows (actions) respectively. Use name field in Action properties pane.
ACTIONS
Each action should have „Save document” checked in the properties panel..
If a travel request is rejected we want the Approver to provide a reason. Please mark „Reject” action as „Requires confirmation” and enter confirmation prompt text.

50. But who can approve my trip?
ACTIONS STEPS
We have already defined who can request a travel. Those a app creators.
Now we need to define who can approve my request.
For sake of this tutorial we will assume all requests are approved by one person.
In real life this can be defined in data tables and/or calculated based on various conditions. Advanced techniques you will find
other Tutorials like Qalcwise workflow and Working with Data.
Multiple approvals, parallel approvals, sequential approvals and auto approvals are also easy to define in Qalcwise.

51. Step 3 - Add Approver. (workflow action step)
In our case we decided that Cynthia White will accept travel requests. I know her email is demo04@qalcwise.com.
To set approvers, we need to define editors on „In approval” workflow state..
ACTIONS STEPS
To achieve that, we add Action Step „Set editors” and pass Cynthia’s e-mail. (this btw can be calculated or pulled from data tables).
How to add Action Step to „In approval” state is shown below.

52. Action Steps
2. They happen either on
a) an Action
b) entry to State
c) leaving a state
1. Action Steps – are the third element od
Qalcwise workflow.
4. Sample action steps are listed on screen
on ritgh. Please take a few moments and
take a look at the. There is plenty of
freedom of what we can do with action
steps.*)
- Manage workflow
- Work with data
- Send emails
- Manage tasks and messages
- Print
- Manage editability
- Run other apps
*) Qalcwise guys are adding more and
more action steps here .
ACTIONS STEPS

53. Workflow widget
There one more thing we need to do before we give our APP to our teammates is to add WorkflowActions widget to our Design.
Once the APP is running, action buttons will be named according to action arrows from the your workflow diagram. So,to give an example, once you start your request, you will see a
button called „Submit for approval”, once Cynthia opens your request, she will see 2 buttons „Approve” and „Reject”.
Important:
1. If you define a workflow for your APP, you will not be able to activate this APP if there is now WorkflowActions section on your Design page. It simply makes no sense. Qalcwise will
check that for you.
2. Action buttons are not available on Designer’s Quick Preview but they are available for testing in app Draft mode. An app is in Draft always when you save it. It’s in Production mode
if you Activate it. Draft mode is perfect for testing your app design.

54. APP Tab
You have probably figured out that you can add tabs to your design. 
Add new application TabBundle another APP as a ‚tab’ here
Let’s add a tab called ‚Cooments’. We’ll place a history widget there.
Notice that you can also include other apps as tabs here just by pressing ‚Bundle app’ button.

55. History widget
This is the last step
Place the ‚History’ widget on the Comments tab.
Notice, history widget is not required activate and run the APP . But it’s useful.
The history widget keeps all the workflow history. Who-did-what-and-when. Workflow entries are done automaticaly at each workflow step.
It also allows adding manual comments to communicate throughout the business proccess.
Of course you can shoow and hide this widget on the APP runtime by using formulas like all the other sections.

56. THAT’S IT THE APP IS READY!
THAT’S IT THE APP IS READY!
Please SAVE your APP and we are DONE!

57. THAT’S IT! THE APP IS READY!

58. Let’s go back Qalcwise Workspace and run our APP .
Please notice that our ‚Travel Request’ APP is in ‚Draft’ mode. It allows safe testing before we activate the APP. All users (defined as
app creators already have access to it.

59. Let’s run our new
Travel request approval
APP.
I fill the required data.
And click‚
Submit for approval
button.
That’s me
Once I click the ‚submit’ I am moved
back to my Work Board.

60. Here is my request.
I see it’s in approval
by Cynthia.
Notice, you can still click on this
request, but it will open in read only
mode for you. You are a ‚Reader’ now.
This is a general rule, Editor users from
previous steps become Readers in
subsequent steps unless it’s explicitly
defined otherwise in your APP
workflow.

61. The request is now at
Cynthia, so if I switch
the Qalcwise magic
Focus button it will
dissappear from my
Work Board as a task
that doesn’t require
my attention now.
Qalcwise magic Focus button
Let’s go to Cynthia
screen now.

62. This is Cynthia’s
Work Board. It has
Focus switched on,
so apparently she
has more tasks to do.
You can see a task
from our APP is also
here.
Cynthia clicks the
request to approve or
reject.
Notice: As you see there might be
a bit more info displayed with our
task to help Cynthia make
decision easier. You will learn
how to enrich task info with KPI’s
and some other useful
information in Advanced tutorial.
Cynthia

63. This is what Cynthia
sees after she clicks
the request.
These are our actions
we designed on
Workflow page,
remember?
Notice: In our APP Cynthia can
still edit the data here. To
prevent that, you can use „Set
section editability” action step on
you workflow. How to do this
and more with action steps you’ll
find in Advanced tutorials.
Notice: what Cynthia sees on her
screen can also be managed just
by using formulas in section
visibilty property. E.g. you can use
CurrentState() function or
CurrentUserName() or any
other that suits you.
Cynthia

64. Cythia has approved
my request.
As you can see, it
automatically
dissapears from her
Focus.
Let’s switch to my
screen now.
Notice, she will still see this request as
approved when the Focus switch is
off.
CynthiaIt was here 

65. I’m back again
We’re back to my
screen. I can see the
request is approved.
Let’s click it to see
details again.

66. As you can see. It’s in
read-only mode.
Still me

67. For a final call let’s
click the ‚Comments’
tab.
You can see, it stores
actions and their
dates.
You can sse when the request
was issued and when it was
approved. (it was Saturday).
Later on you will be able to use
this information in formulas. This
is useful to monitor (dashboard)
larger processes’ performance.
The only thing it doesn’t is that I
was sitting in Starbucks Coffee
doing this demo. But I know
qalcwise guys are working on it,
so it does .
Still me

68. Once the request is
approved (or rejected)
we can send it archive
simply by clicking
archive icon.
We can always find it
there.
As you can see APP
tasks and messages
can be commented in
Qalcwise
Notice, „finished” processes can
automatically go to Archive in order not to
clutter peoples’ Work Boards.
All you have to do is to mark „Final State”
checkbox on a state in Worflow Designer.

69. THAT’S IT.
You have learned a lot!
1. Qalcwise Workspace vs Qalcwise Designer
2. Qalcwise Designer components
3. Create New App
4. Designer UI layout – Design Page
5. Designer toolbox
6. Widgets panel
7. Data panel
8. Properies panel
9. Placing Widgets on Design Page
10. App Info and assign App to a Stream
11. Using spreadsheet widget
12. Cell types
13. Formulas and funcions
14. Workflow related functions (basics)
15. Making cells editable
16. Creating Dropdowns with Array()
17. Playing with section hiding
18. Qalcwise Responsive Design
19. Datepickers
20. Formulas between sections
21. Checkbox cells
22. Workflow roles
23. Creators
24. Editors
25. Readers
26. Defining App Creators
27. App visibility, alignement and icon
28. Workflow states
29. Workflow actions
30. Workflow action steps
31. Create a simple workflow
32. Define process approvers
33. Workflow widget
34. History widget
35. App tabs
36. App bundling
37. App behaviour
Yes, that’s a lot! Hope you had fun . Please check other tutorials because real fun start with action steps, charting and using data.

70. END
Check Other Units
Qalcwise Collaboration Workspace -Admin Options
Qalcwise Collaboration Workspace –Advanced Search
Qalcwise Designer – Tutorial Series
Qalcwise - Sample Apps
Qalcwise Applications Marketplace
Qalcwise Designer – Working with Data
Qalcwise Designer – Advanced Workflow
Qalcwise Designer – Advanced APP design options
Qalcwise API Integrations (coming soon)
Qalcwise Designer – Data imports