This overview will show you how to create your first button. We will create
a button that opens up the calculator on Windows. We will cover how to set up
the visuals of a button and how to add actions.
Step 01: Opening the button detail screen
In our previous guide we ended up with the default page.
This page above already has a few buttons that will execute some functionality as
opening a website and showing a default toggle button. But we also have
four spots free to create our own buttons. This guide will give you some
more insights on how to create your own buttons and how to use the button edit screen.
Anyway, when you are ready, click on the first free space to open the button
detail screen.
Step 02: Overview of the button edit screen
Below is the button edit screen where we have marked the five areas of interest:
- Button Preview - At the top of this screen is where the preview
of your button will be shown.
- Make Button Snapshot - With the two small white icons you can
copy a snapshot of the button to the clipboard (first) or to a file (second).
The snapshot of a button will make an image of the button preview and with
all the buttons actions, events and on hold entries. This is very handy
for when you want to share your button with someone to show your actions and
event logic.
- Button Settings - Here you can adjust all the settings of a
button. There are 5 different sets of settings that allow you to fully
customize your button ranging between adjusting the text on a button to its
size to setting up graphics.
- Action Category List - This is the list of all Actions and
Events Touch Portal and the installed plug-ins provide to you to use in
your buttons. This list will be different for the different states a control
can handle and per control.
- Button Functionality setup - Below the button preview you have the
system to add functionality to your button. There are three lists to which
you can add actions. The first On Press list allows you to add Actions
that will be triggered in order when you have pressed this button on the
mobile device. The second On Event is the list of events to listen
to for this button. You can then add actions that need to be executed once
that event occurs. The third On Hold section is for adding an action
and/or a visual cue for when you are holding down the button on your mobile
device.
- Type of Control - Each control on your Page can be either a Button or
a Slider. With this dropdown you can change between the two types of
control.
Step 03: Setting up the title and background
We first start by setting up the button. We will create a button with the following settings:
First we edit the button Title. You can use enter to create a new line, this
way you can position text on a button better.
The second part is to change the background colors, click on the "Background visible" to
enable the background settings and change the colors.
Step 04: Adding the action
Now we have pretty button, we need to make it do something. If you use this
button now, it will not do anything. So we need to add the action to open
the calculator.
On the right of the button detail screen, we have our big list of actions
that you can add to a button. All actions are categorized. For this instance
we need the "Run" category as we want to run the calculator application of
Windows.
Click on the "Start Application" action and it will add an action in which
you can specify which application to run
Click on the "..." button to open a file explorer. Navigate
to the calc.exe just like we did and select the file. Click the button "Open" and the
target is added to the action.
The action is placed on the "On Press" section. Every action in this list
is executed in order when you press this button on your mobile device. So in
this case each time you press this button it will open the Windows Calculator
app.
End Result
You now have learned how to change the visual representation of your button and
you now know how to add actions to the button.
Back to Guide Overview
