13. Responsive Apps

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:

Desktop

Tablet

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

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 <columns> and move some of the existing components into them, like so.

<?xml version="1.0" encoding="UTF-8"?>
<view title="Punch List">
    <!-- Parameters go here: -->

    <!-- Variables go here: -->
    <var name="selected_item" type="item" />
    <var name="open_punches" type="query:item" />

    <!-- Components go here: -->
    <heading>Welcome to the Punch List App</heading>

    <info>A list of all the punches that have not yet been taken care of are shown below</info>

    <columns>
        <column>
            <object-list label="Open Punches" query="open_punches" bind="selected_item" empty-message="There are no open punches at the moment." required="true" />
            
        </column>
        <column>
            <button label="View Selected Item" on-press="viewItem" validate="true" style="solid" />
            <button label="Delete Selected Item" on-press="deleteItem" validate="true" style="solid" />
            <button label="Add New Item" on-press="goToNew" validate="false" style="solid" />
        </column>
    </columns>
    
</view>

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.

<?xml version="1.0" encoding="UTF-8"?>
<view title="Add New Punch List Item">
    <!-- Parameters go here: -->

    <!-- Variables go here: -->
    <var name="item" type="item" />

    <!-- Components go here: -->

    <columns>
        <column>
            <capture-photo bind="item.photo" required="true" />
        </column>
        <column>
            <text-input bind="item.comments" required="true" />
            <button label="Save Item" on-press="saveItem" validate="true" style="solid" />
        </column>
    </columns>

</view>

And in your view_item.view.xml, update the code to the following.

<?xml version="1.0" encoding="UTF-8"?>
<view title="View Punch Item">
    <!-- Parameters go here: -->
    <param name="item" type="item" />

    <!-- Variables go here: -->

    <!-- Components go here: -->
    <heading>{item.comments}</heading>
    <columns>
        <column>
            <info-table>
                <row label="Item Comments" bind="item.comments" />
                <row label="Item Status" bind="item.status" />
                <row label="Current Time" value="{$:showTime()}" />
            </info-table>
        </column>
        <column>
            <display-photo bind="item.photo" />
        </column>
    </columns>

    
    <button label="Mark as Closed" on-press="markClosed" validate="false" style="solid" />
    <button label="Go back" on-press="dismiss" validate="false" style="solid" />

</view>

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.

Desktop

Mobile

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

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.