# Table of Contents
- [Tutorial: Build your First App | JourneyApps Docs](#tutorial-build-your-first-app-journeyapps-docs)
- [2. Create a new App | JourneyApps Docs](#2-create-a-new-app-journeyapps-docs)
- [22. Conclusion | JourneyApps Docs](#22-conclusion-journeyapps-docs)
- [3. OXIDE IDE Overview | JourneyApps Docs](#3-oxide-ide-overview-journeyapps-docs)
- [6. View Components | JourneyApps Docs](#6-view-components-journeyapps-docs)
- [1. Introduction | JourneyApps Docs](#1-introduction-journeyapps-docs)
- [What is JourneyApps Platform? | JourneyApps Docs](#what-is-journeyapps-platform-journeyapps-docs)
- [20. Version Control | JourneyApps Docs](#20-version-control-journeyapps-docs)
- [JourneyApps Syntax Basics | JourneyApps Docs](#journeyapps-syntax-basics-journeyapps-docs)
- [13. Responsive Apps | JourneyApps Docs](#13-responsive-apps-journeyapps-docs)
---
# Tutorial: Build your First App | JourneyApps Docs
This tutorial explains all of the essential concepts of building applications on JourneyApps. Once you have completed the tutorial, you should be able to build a very wide variety of applications. We will be building a practical / real-world example app throughout this tutorial and each time when we explain a new JourneyApps concept, we will show you how to apply it in the real-world example app.
We strongly recommend that you read the [What is JourneyApps](/reference)
section before proceeding. This will give you a much clearer idea of the different components of JourneyApps on a high level and how they fit together.
[PreviousWhat is JourneyApps Platform?](/reference)
[Next1\. Introduction](/reference/get-started/tutorial-build-your-first-app/1.-introduction)
Last updated 2 years ago
---
# 2. Create a new App | JourneyApps Docs
[Previous1\. Introduction](/reference/get-started/tutorial-build-your-first-app/1.-introduction)
[Next3\. OXIDE IDE Overview](/reference/get-started/tutorial-build-your-first-app/3.-oxide-ide-overview)
Last updated 2 years ago
###
[](#hello-world)
"Hello World"
The best place to start when using any new tool is to create a "Hello World" app — the simplest possible app that you can create. Let's do that right now.
###
[](#create-the-hello-world-app)
Create the Hello World App
From the Admin Portal click on **Create App**
Enter a name for the app and hit **Next** (for now you can ignore the region selector and just it leave it on US).
Select the "Source control" you want your new app to use and hit **Next** (for now you should select "Revisions" and "JourneyApps", for more on GitHub integration please reach out to your Customer Success Manager).
Select the "Blank" app template and hit **Next.**
After hitting **Next**, OXIDE will get your new app all set up for you and you will get navigated to the _Overview_ for your app:
---
# 22. Conclusion | JourneyApps Docs
###
[](#thank-you)
Thank you!
Thanks for completing the _Build you first app_ tutorial. We are very glad to welcome you on board as a new JourneyApps developer.
###
[](#checkout-the-reference-documentation)
Checkout the Reference Documentation
Consult the various other sections of the [JourneyApps Documentation](https://docs.journeyapps.com/)
to find detailed documentation on how various things in JourneyApps work.
###
[](#need-help-with-something)
Need Help with Something?
If you have any questions about how to do something with JourneyApps, have suggestions for new features, or have found a bug or issue, please contact [JourneyApps Support](http://support.journeyapps.com/)
or ask a question in our [Developer community](https://devs.journeyapps.com/)
.
###
[](#view-case-studies)
View Case Studies
For real-world examples of solutions that have been successfully built and delivered on JourneyApps, browse our [Customer Success Stories](https://journeyapps.com/customers/)
.
[Previous21\. CSV and APIs](/reference/get-started/tutorial-build-your-first-app/21.-csv-and-apis)
[NextJourneyApps Platform Fundamentals](/reference/get-started/journeyapps-fundamentals)
Last updated 2 years ago
---
# 3. OXIDE IDE Overview | JourneyApps Docs
In this section we will cover the basic components of the JourneyApps online IDE, OXIDE, where developers build applications.
###
[](#simple-vs-advanced-mode)
Simple vs advanced mode
OXIDE supports two user modes, **Simple** and **Advanced**, where Advanced mode provides the developer additional configuration and functionality.
Examples of additional functionality in Advanced mode:
* You can manage the trays in your workspaces, collapse and expand them, add and remove panels, even add additional trays.
* You can have more than 2 editor panes open at any time.
To switch modes, simply access your Profile settings in the toolbar on the top right corner and select "Switch to advanced IDE mode" or "Switch to simple IDE mode", or find these via the Command Palette (`ctrl+shift+p` on Windows or `cmd+shift+p` on MacOS).
For this tutorial we will mostly be focussing on **Simple** mode.
###
[](#component-overview)
Component Overview
It is important to become familiar with the main components of OXIDE (marked in the images below).
* **Editor Panes** - These are where you used edit and interact with your app's code.
* **Panels** - These display specific bits of information in an interactive but mostly read-only component.
* **Trays** - These hold and display a collection of panels. Can be expanded or collapsed.
* **Workspaces and Workspace Tabs** - A pre-configured logical collection of trays, panels and editor panes that are used to make working on a specific part of your application as easy as possible.
* **Footer** - Displays diagnostic information about your applications
* **Test App** - Allows you to configure a test device to continuously test your application while you develop.
* **Dashboard** - This icon takes you to your OXIDE dashboard where you can review and switch between apps and organizations.
* **Organization and App Switcher** - This is a quick way to switch between apps and organizations, without returning to your dashboard.
* **Toolbar** - Here you can access the IDE's search functionality and various settings collections.
* **Command palette** - You can open the command palette with a simple keyboard shortcut, and then access just about anything you need to do with your application.
For further details about each component, please see [this section](/reference/oxide/getting-started-with-oxide/components-of-oxide)
.
###
[](#resetting-your-workspaces-preferences)
Resetting Your Workspaces / Preferences
In the event that you find yourself in a position where your OXIDE workspaces do not look like the defaults anymore and you have no idea how to get them back to how they were, then you may want to consider "Resetting your workspace" or even "Resetting your preferences". These actions restore OXIDE default settings and layouts.
####
[](#reset-preferences)
Reset preferences
To reset your preferences, access the "Reset preferences" action from the command palette (`ctrl+shift+p` / `cmd+shift+p`). This will reset shortcuts, and other IDE settings, like IDE mode, to their default values. This will not reset your workspaces by default unless you also opt to "Reset your workspaces" from the prompt that will follow a successful "Reset your preferences" action.
####
[](#reset-workspaces)
Reset workspaces
To reset your workspaces, access the "Reset workspaces" action from the command palette (`ctrl+shift+p` / `cmd+shift+p`). This will reset all the workspaces to their default values layout. This will not reset any shortcuts or other IDE settings.
For further details about OXIDE, see [these docs](/reference/oxide/getting-started-with-oxide)
.
[Previous2\. Create a new App](/reference/get-started/tutorial-build-your-first-app/2.-creating-a-new-app)
[Next4\. Hello World app](/reference/get-started/tutorial-build-your-first-app/4.-hello-world-apps)
Last updated 2 years ago
---
# 6. View Components | JourneyApps Docs
[Previous5\. The Data Model](/reference/get-started/tutorial-build-your-first-app/5.-the-data-model)
[Next7\. Queries and Data Sync](/reference/get-started/tutorial-build-your-first-app/7.-queries-and-data-sync)
Last updated 2 years ago
###
[](#add-view-components)
Add View Components
After you've defined your Data Model, the next step in building a JourneyApps application is to create the layout of your various views (screens), and then finally to add logic to them. Therefore, go to the **Views** Workspace of your Punch List app. You'll see that you once again start out with the _main_ and _nav_ views.
Let's recap the requirements for our Punch List app:
**App Design: Construction Punch List**
First and foremost, our app needs to display a list of all the open punch list items, so that the construction contractor or building tenant/owner can quickly see which problems still need to be attended to. In the _Hello World_ app, you saw how basic UI components like [headings](/reference/build/ui-components/all-ui-components/heading)
, [info](/reference/build/ui-components/all-ui-components/info)
, [text-inputs](/reference/build/ui-components/all-ui-components/text-input)
and [buttons](/reference/build/ui-components/all-ui-components/button)
work (Tip: A full list of all the UI components in JourneyApps is available [here](/reference/build/ui-components/all-ui-components)
).
###
[](#add-a-heading-and-info-text)
Add a Heading and Info Text
Let's start by adding a heading and some info text to the **main** view of our punch List app again. In the `main.view.xml` add the following, and remember the order in which you specify components in the `xml` is important. `Parameters` first, then `Variables` and finally `View Components`.
Copy
Welcome to the Punch List AppA list of all the punches that have not yet been taken care of are shown below
###
[](#add-a-list)
Add a List
Now let's add an `object-list` component which will display a list of all our open punch items. If you type `object` (below your heading and info text) and then highlight and select the auto-complete suggestion for `object-list`, OXIDE will add the basic `xml` structure for the `object-list` component to your view. This will give you an object-list template like this:
Copy
You can now populate the properties in the `object-list` as follows:
* **bind** — if the user selects an item in the list (by tapping on it), this determines in what variable the selected item will be stored (recall that _Variables_ are used to store data locally/temporarily in a view). Let's make it `selected_item`.
* **query** — this is the variable containing the whole list of items that we want to display. Let's make it `open_punches`.
* **label** — this is the label that will be shown above the list. Let's make it _Open Punches_.
* **empty-message** — this is the message that will be shown to the user if the list of items is empty. Let's make it: _There are no open punches at the moment._
* **required** — this relates to input validations, which we'll discuss later in the tutorial (you can ignore it for now).
Your completed `object-list` should now look like this:
Copy
###
[](#add-the-variables)
Add the Variables
We've made reference to variables called `selected_item` and `open_punches`, but we haven't defined them yet (you should see some warnings / errors in OXIDE telling you the same). Let's do that now.
Underneath _"Variables go here"_ in your view, you can type `var` to auto-complete your `selected_item` variable, and give it a `type` of _item_. Recall that `open_punches` is a list of multiple items — therefore it needs to be a special kind of variable — a **query**. Type `query` and then auto-complete and fill it in similarly:
Copy
Your `main.view.xml` should like this now
Copy
Welcome to the Punch List AppA list of all the punches that have not yet been taken care of are shown below
###
[](#refresh-and-test-the-app)
Refresh and Test the App
Refresh your desktop and/or mobile app.
(If your device is still showing the _Hello World_ app then simply execute the _Test App_ action again. On mobile, you may need to _Leave App_ before you can scan the QR code again. To do this open the App, click on the three dots in the top right corner and choose _Diagnostics_. Then click on the three dots again and choose _Leave App_. This will unlink (unenroll) your container from the current app and allow you to link it to a new app - in this case the Punch List App)
Your app should now look like this:
DesktopMobile
Of course, there are currently no punches — we'll get to that in the next sections. This section should give you a taste of how UI Components in JourneyApps typically work. We'll cover some of the other components such as [list](/reference/build/ui-components/all-ui-components/list)
and [GPS capturing](/reference/build/ui-components/all-ui-components/capture-coordinates)
later in the tutorial, and you could also check out the [full list of UI components](/reference/build/ui-components/all-ui-components)
in the reference documentation for details on how all of JourneyApps' UI components work.
---
# 1. Introduction | JourneyApps Docs
[PreviousTutorial: Build your First App](/reference/get-started/tutorial-build-your-first-app)
[Next2\. Create a new App](/reference/get-started/tutorial-build-your-first-app/2.-creating-a-new-app)
Last updated 2 years ago
###
[](#signing-in-to-the-journeyapps-ide-oxide)
Signing in to the JourneyApps IDE - OXIDE
The first step to building apps on JourneyApps is to sign in to **OXIDE**, the **JourneyApps online IDE**. Head over to [oxide.journeyapps.com](https://oxide.journeyapps.com/)
and you will be redirected to the JourneyApps Accounts Portal to sign in.
###
[](#admin-portal)
Admin Portal
Once you've signed in, you'll arrive on the **Admin Portal** page, as seen below, and from here you will be able to create new apps or update existing apps from the list (initially this list will be empty - as in the screenshot).
###
[](#switching-between-organizations)
Switching Between Organizations
All your apps will be grouped by **Organization**. By default your account will have two organizations, a "production" organization and a "sandbox" organization. You can switch between Organizations that you have access to using the org dropdown in the top left corner of the screen.
If you have a Trial account, you will only have access to one organization
---
# What is JourneyApps Platform? | JourneyApps Docs
[NextTutorial: Build your First App](/reference/get-started/tutorial-build-your-first-app)
Last updated 11 days ago
JourneyApps Platform is a cloud-based software development platform to build and run custom enterprise apps. It allows you to rapidly build apps in an online IDE (called OXIDE) which are instantly deployed over-the-air and dynamically rendered as a hybrid app on various different devices (desktop, mobile, web, RealWear®).
###
[](#designed-for-enterprise-apps)
Designed for Enterprise Apps
JourneyApps Platform is intended for building enterprise apps, including Business-to-Employee (B2E) apps and Business-to-Business (B2B) apps. This is ideal for giving employees and customers access to business processes within an app.
JourneyApps Platform is therefore a very focused platform, and not aimed at building mass-market or "consumer" apps (B2C). If you intend to build consumer apps, JourneyApps Platform would not be a good fit for your requirements.
###
[](#id-100-cloud-based)
100% Cloud-Based
Developing apps on JourneyApps Platform happens 100% online, in your browser: You don't have to install an IDE or do a complicated development environment setup on your computer. To develop apps, you link a device to our online IDE (called OXIDE), and then all changes that you make to your app are pushed to the device via the cloud.
###
[](#powersync-global-automatic-data-sync)
PowerSync: Global Automatic Data Sync
A major part of the power of JourneyApps Platform lies in its global automatic data synchronization capability (PowerSync), which is the way that apps work by default. What this means is:
* The cloud datastore in the Backend serves as the centrally-accessible location in which your app's data is stored.
* User devices running your app automatically synchronize the data from the cloud data store to their local storage memory for offline access.
* Whenever any changes are made to the data in the cloud data store via the Backend Portal (see diagram below) or APIs, the changes are immediately synchronized to each user running your app. This process happens automatically in the background without any user intervention.
* Similarly, whenever any changes are made to the data from a particular user, those changes are immediately synchronized to the cloud data store (Backend) using store-and-forward.
* Each app generates its own REST API on the Backend that can be used to create, read, edit and delete data on the cloud data store.
###
[](#powersync-allows-apps-to-be-used-offline-by-default)
PowerSync Allows Apps to be Used Offline by Default
Because of the PowerSync capability described above, JourneyApps Platform applications can be used fully offline by default. Users can continue to use JourneyApps Platform applications even if they do not have network connectivity.
###
[](#cloudcode-serverless-engine)
CloudCode Serverless Engine
You can build and run serverless JavaScript or TypeScript tasks through CloudCode. CloudCode is a full Node.js environment, allowing you to include any NPM packages in your tasks. Typical use cases for CloudCode tasks include:
* Basic integrations with external services
* Bulk operations such as archiving data
* Generating reports, such as CSV files, PDF reports or Excel spreadsheets
* Sending emails
###
[](#journeyapps-platform-building-blocks)
JourneyApps Platform Building Blocks
JourneyApps Platform primarily consists of the following building blocks:
* **OXIDE:** The online IDE where developers build JourneyApps Platform applications.
* **Backend:** This is the cloud backend to which apps are deployed. It serves as the cloud data store for your app and also provides user management.
* **JourneyApps Container:** Available for mobile (with support for Android and iOS), desktop (Windows), web browsers as well as wearable devices (RealWear®). When initially installed, it is simply an empty generic container. Once you link it to a specific app, your app customizations are deployed to the device over-the-air, and the app is dynamically rendered. This means that deploying new versions of your app to users is extremely easy: Once the container is installed, all app changes are deployed over the air.
###
[](#environments-and-staged-deployment)
Environments and Staged Deployment
JourneyApps Platform is used both for developing and deploying/running apps. For that reason, it is necessary to keep your real-world or live data and users separate from the data and users that you use for testing purposes during the development process. For this purpose, JourneyApps Platform provides 3 different environments of the Backend:
* **Testing**: This is what app developer(s) use for iterative testing while apps are being developed. When you link a mobile or desktop device in OXIDE for testing/development purposes, it is enrolled to this environment, and any changes that you make are automatically deployed here so that you can immediately test the changes on a device.
* **Staging**: This can be used by other stakeholders to test a new version of an app before it goes live.
* **Production**: This is the live environment where your real-world day-to-day users operate and data is kept.
###
[](#an-app-consists-of-a-data-model-and-views)
An App Consists of a Data Model and Views
Building an app on JourneyApps Platform involves the customization of two kinds of things:
* [**Data Model**](/reference/get-started/journeyapps-fundamentals/what-is-the-data-model)
: This describes the data that your app makes use of (in more technical terms: object types with their attributes and relationships)
* [**Views**](/reference/get-started/journeyapps-fundamentals/what-are-views)
: This defines the layout and logic for the actual screens in your app.
###
[](#the-journeyapps-platform-approach-to-building-apps)
The JourneyApps Platform Approach to Building Apps
The diagram below shows a typical high-level approach to how you would build an app on JourneyApps Platform. This approach is very similar to a standard software development methodology, however, take note of the following key differences with JourneyApps Platform:
* **Go directly from idea to app creation:** Normally when developing apps, much time is spent creating specification documents and wireframes to design the application before development commences. It's so easy and fast to develop apps on JourneyApps Platform that often it's best to go directly from idea to the first version and put it in someone's hands.
* **Iteratively test on a device, all the time:** OXIDE automatically deploys your app changes to the Testing environment as you are developing them, and the app on the device updates dynamically. This means that iteratively testing changes directly on a device is much easier and faster than it is in a traditional software development context, and therefore is the recommended approach to use.
* **One-click deploy to production:** In a traditional mobile development scenario, releasing the app to live users is often a risky and laborious process. With JourneyApps Platform, deploying to production is simply a one-click process. Once you are satisfied with a change that you've developed in OXIDE, you click a single button to release this change to the Staging or Production environment of the Backend, and JourneyApps Platform takes care of the rest.
OXIDE, the online IDE where developers build apps
An example of an app running in the JourneyApps Container on desktop.
The simplified JourneyApps architecture
---
# 20. Version Control | JourneyApps Docs
[Previous19\. Deployment and Users](/reference/get-started/tutorial-build-your-first-app/19.-deployment-and-users)
[Next21\. CSV and APIs](/reference/get-started/tutorial-build-your-first-app/21.-csv-and-apis)
Last updated 2 years ago
[](#id-20.-version-control-systems)
20\. Version Control Systems
---------------------------------------------------------------------
Saving your code base at various stages of the development process is a fairly standard practice, and with JourneyApps this is no different. If something goes wrong during development you want to be able to quickly revert the code to the last known stable version, and a version control system makes this a lot simpler. JourneyApps supports 2 forms of Version Control for your apps, you can integrate your app's code with Github or you can you use our built-in 'Revisions' mode. Reach out to your Customer Success Manager or our [Developer community](https://devs.journeyapps.com/)
if you want to know more about our GitHub version control integration. For our Punch List App we chose 'Revisions' mode, so let's quickly talk about that.
###
[](#revisions)
Revisions
Saving a version of your code using 'Revisions' mode is very simple. At the bottom of your screen in OXIDE, next to the `visor`, you will see a button to 'Save changes'. Depending on what your last action was this button may currently be disabled - this will happen if there are no new changes to your code. And the reason why OXIDE may think that you have no new changes is if the last thing you did was to Deploy your app to the Staging environment, like me. Every time you deploy your app to Staging or Production, OXIDE will automatically save a revision for you.
So, let's go to our Views workspace and go make a change so that we can save a new revision. Let's head over to the 'Main' view, and update the `main.view.xml` - let's change the heading for our App Admin's to now say: 'Welcome App Admin: All Punch Items Listed Below'. Like this
Copy
Welcome App Admin: All Punch Items Listed Below
Once you have made this change you will see that the 'Save changes' button is no longer disabled. Let go ahead and press the button and save a new revision, when prompted for a revision message enter something descriptive, like 'Update admin welcome heading'.
After you have saved a revision you will see it in your app's 'History' panel, and it should look something like this.
It is recommended that you save a revision whenever you've added a new feature to your app, or removed something from your app. It is further recommended that you save the revision before deploying the app to the "Staging" or "Production" environments.
Reach out to your Customer Success Manager or our [Developer community](https://devs.journeyapps.com/)
for more information about additional advanced features of the various version control systems, like comparing and reverting revisions.
---
# JourneyApps Syntax Basics | JourneyApps Docs
[](#xml)
XML
-----------------
All Views and most of their [components](/reference/build/ui-components)
are defined using XML syntax. It's possible to define queries directly from the View XML. [Format strings](/reference/app-features/xml-format-strings)
can also be used in some components in the XML. In addition, the [Data Model](/reference/get-started/journeyapps-fundamentals/what-is-the-data-model)
and [Sync Rules](/reference/build/data-model-configuration/data-rules/sync-rules-v2)
are also defined using XML.
If you have never used XML before, you can find more information [here](http://www.xmlfiles.com/xml/)
.
[](#javascript-typescript)
JavaScript/TypeScript
-----------------------------------------------------
JavaScript or TypeScript is used to define the behavior and logic of apps built on JourneyApps. Each view has a corresponding JavaScript or TypeScript file, that is automatically executed when the view loads.
The following functionality is supported from the JavaScript/TypeScript in JourneyApps:
###
[](#creating-variables)
Creating Variables
The JavaScript/TypeScript `init()` function is called when a view is loaded for the first time. This is typically used for initializing variables or queries.
Any variable or parameter defined in a view can be referenced by `view.variablename`.
Example View XML:
Copy
... and the JavaScript:
Copy
function init() {
view.comments = "";
}
###
[](#referencing-variables)
Referencing Variables
A variable (or parameter) in a view can refer directly to a variable, a field of an object variable, and traverse through object relationships.
####
[](#example)
**Example**
Suppose we have a view defining the following variables:
Copy
Then the following variable references are all valid:
Copy
counter
current_asset
current_asset.make
current_asset.category
current_asset.category.name
###
[](#navigating-to-other-views)
Navigating to other views
To navigate to other views, you can use the `navigate` syntax.
You can define the logic for navigation from either the JS or the XML. There are also multiple `navigate` methods that you can use, depending on whether you'd like to add the new view to the view stack, or whether you'd like to dismiss back to a previous view or not. For a complete reference, please read [the reference documentation](/reference/get-started/journeyapps-fundamentals/view-navigation)
.
For example, if you have a view with path `user/new`, it can be called from JavaScript as follows:
Copy
function goToNewUser() {
navigate.link("user/new");
}
If you wish to navigate directly from the XML (for example, by using a button), you can use the `$:` syntax to call the relevant `navigate` method directly (read more about `$:` functions [here](/reference/app-features/calling-js-functions-from-xml)
).
Copy
If the view we are linking to requires any parameters, we can simply pass those parameters to the JavaScript function, for example:
Copy
function goToNewUser() {
// The additional parameters to this function are passed to the 'user/new' view.
navigate.link("user/new", view.user_type);
}
Similarly from the XML:
Copy
###
[](#calling-links-with-branching-logic)
Calling Links with Branching Logic
Example View XML:
Copy
To do branching, we can simply use instead of an if statement in our JavaScript function:
Copy
function proceed() {
if (view.age >= 18) {
navigate.link("adult_form");
} else {
navigate.link("child_form");
}
}
###
[](#performing-calculations)
Performing Calculations
An example for how calculations may be performed:
View XML:
Copy
BMI
View JavaScript:
Copy
function calculate_bmi() {
var weight = view.weight;
var height = view.height;
if (weight > 0 && height > 0) {
var finalBmi = weight / (height / 100 * height / 100);
view.bmi = finalBmi;
if ( finalBmi < 18.5 ) {
view.description = "The patient is too thin.";
} else if ( finalBmi < 25 ) {
view.description = "The patient is healthy.";
} else {
view.description = "The patient is overweight.";
}
} else {
dialog("Incorrect inputs", "Please complete the fields correctly");
}
}
Note that the view is automatically refreshed with the new "bmi" and "description" values.
###
[](#debugging)
Debugging
JourneyApps provides several ways to debug your app.
####
[](#console.logs)
**console.logs**
For simple or repetitive debugging operations, you can display debugging messages on your app's console using the `console.log` function. See the next section for instructions to access the console.
Copy
console.log("message");
These messages can be seen in the application [diagnostics](/reference/technical/device-diagnostics)
, under the _Logs_ section, as well as the app's console. This latter option is more suitable for development purposes. See the next section for details.
####
[](#chrome-developer-console)
Chrome Developer Console
An app's console is found within the "Console" tab of the Chrome Developer Console.
The Chrome Developer Console can be accessed when the _Debug_ option is enabled in the JourneyApps container. This option is enabled for the Desktop container installed via the **Test App** flow in OXIDE, and is also enabled on [Web](/reference/technical/supported-platforms/web-container)
(testing.onjourneyapps.com). The _Debug_ option can be enabled for a custom-branded container in the [Platform section](/reference/oxide/create-and-manage-app-containers#platforms)
.
Opening the console differs per platform:
* On Desktop, right-click anywhere and select "Toggle DevTools".
* On Web, right-click and select "Inspect", and then navigate to the "Console" tab.
* Debugging on Android devices requires several steps, following the general Android debugging guidelines. On a high level:
* "[Developer options](https://developer.android.com/studio/debug/dev-options)
" must be enabled on the device.
* The device must be connected to the [Android debug bridge](https://developer.android.com/tools/adb)
or Android Studio on a Desktop computer (via USB or wirelessly).
* On the Desktop computer, in Chrome, the Android device should then be listed here: [chrome://inspect/#devices](chrome://inspect/#devices)
* Select "inspect" to open the console.
####
[](#debug-console)
**Debug console**
**Version compatibility**
The debug console was introduced with version **4.75.0** of the JourneyApps Runtime.
For more advanced debugging use the debug console. Capabilities include accessing view variables from within the developer console, and exploring underlying components of your app such as the `DB` or `journey` namespaces.
It is available within the Chrome Developer Console described above. To activate the debug console, open the "Console" tab and change the console context to `JourneyScript.worker.js` in the available dropdown.
* Enable **Verbose** log levels, and for best results, update the developer console settings to include time stamps.
* Since version **4.85.0** of the JourneyApps Runtime, more detailed performance profiling can be enabled in the debug console, see [`journey.profiling`](/reference/build/js-ts-apis/journey)
.
###
[](#further-javascript-typescript-functionality-in-journeyapps)
Further JavaScript/TypeScript Functionality in JourneyApps
Working with Objects:
* [Querying the database](/reference/get-started/journeyapps-fundamentals/accessing-the-database/querying-db-objects)
* [Manipulating objects](/reference/get-started/journeyapps-fundamentals/accessing-the-database/manipulating-db-objects)
Other JavaScript/TypeScript Functionality:
* [Linking specific data to a user](/reference/build/js-ts-apis/user)
* [Opening External Links/Apps](/reference/build/integration/opening-external-links-apps)
[PreviousWhat is the Data Model?](/reference/get-started/journeyapps-fundamentals/what-is-the-data-model)
[NextAccess the Database (DB)](/reference/get-started/journeyapps-fundamentals/accessing-the-database)
Last updated 1 year ago
---
# 13. Responsive Apps | JourneyApps Docs
[Previous12\. Data Manipulation](/reference/get-started/tutorial-build-your-first-app/12.-data-manipulation)
[Next14\. Styling](/reference/get-started/tutorial-build-your-first-app/14.-styling)
Last updated 2 years ago
Any JourneyApps application that you develop will automatically be responsive and can therefore be used on either a smartphone, tablet, desktop or even a browser, without any additional development required. JourneyApps does however offer some special functionality aimed at making better use of the available real estate on the larger screen sizes. When you implement these features and run your app on a smartphone, the app will still work and the UI features will "gracefully degrade" to match the smaller screen, as you'll see later in the tutorial. JourneyApps offers 3 features specifically aimed at these larger screen sizes:
* **Columns:** You can divide your View Components into multiple columns, allowing you to fit in more components and data on a single view.
* **Sidebars:** You can add a sidebar to your View Components, that can be used to show the user what their progress is with completing a particular process in your app. (Note: Sidebars can also be used on phones, but they won't appear as a fixed bar on the side of the screen, rather a collapsible bar at the top)
These components are shown below in a hypothetical example app:
DesktopTablet
The example app in the screenshots above involves a sales rep completing a field ticket (invoice). We use the sidebar to show all the steps in the ticket process that need to be completed. Columns are used to better organize information.
###
[](#punch-list-app-add-some-columns)
Punch List App - Add Some Columns
So, let's update our Punch List App to make it more user friendly for our desktop and tablet users and see the responsive nature of JourneyApps in action.
Head back to your **Main** View, and in the `main.view.xml` file we are going add some `` and move some of the existing components into them, like so.
Copy
Welcome to the Punch List AppA list of all the punches that have not yet been taken care of are shown below
Let's also do this for our **Add New** and **View Item** Views. Like so.
In your `add_new.view.xml` file, update the code to the following.
Copy
And in your `view_item.view.xml`, update the code to the following.
Copy
{item.comments}
###
[](#test-on-desktop-tablet-and-phone)
Test on Desktop / Tablet and Phone
Now let's test the app on a tablet or desktop, as well as on a phone, to see the changes.
DesktopMobile
You will see that on the desktop or tablet the app automatically displays the components we nested inside the columns next to one another, whereas on the phone those components are still displayed above another. This is because on the phone the platform realizes there is not enough screen space to display the columns next to one another and so they get stack on top off one another instead, in the order that you specified them in the `xml`. Another good way to test the responsive nature of apps built on JourneyApps is to simply resize the desktop application window. Try it now, once you decrease the width of the window enough it will render as it does on your phone. Like so:
###
[](#sidebars)
Sidebars
We'll also be adding a sidebar to our app, but since sidebars are most often used in conjunction with icons and other styling, we'll wait until the next section which covers the basic styling options before adding the sidebar.
---