LogoLogo
What's NewDeveloper CommunitySupportStatus
  • 🚀Get Started
    • What is JourneyApps Platform?
    • Tutorial: Build your First App
      • 1. Introduction
      • 2. Create a new App
      • 3. OXIDE IDE Overview
      • 4. Hello World app
      • 5. The Data Model
      • 6. View Components
      • 7. Queries and Data Sync
      • 8. Simple Navigation
      • 9. View Stack
      • 10. Input Validation
      • 11. View Parameters
      • 12. Data Manipulation
      • 13. Responsive Apps
      • 14. Styling
      • 15. Lists
      • 16. GPS Capturing
      • 17. Relationships
      • 18. Multiple User Roles
      • 19. Deployment and Users
      • 20. Version Control
      • 21. CSV and APIs
      • 22. Conclusion
    • JourneyApps Platform Fundamentals
      • Creating a New App
        • Git-enabled Apps
      • What are Views?
      • What is the Data Model?
      • JourneyApps Syntax Basics
      • Access the Database (DB)
        • Manipulate DB Objects
        • Query DB Objects
      • View Navigation
        • Deep Linking
      • CloudCode Overview
      • OXIDE (Online IDE)
  • 💻Build your App
    • JourneyApps Syntax
      • Syntax Basics
      • Access the DB
      • View Navigation
      • Async & Await
      • TypeScript Apps (Beta)
        • runtime-build package
        • TypeScript App Troubleshooting
      • What's New in V4
        • Updating to the V4 API
    • Configure your Data Model
      • What is the data model?
      • Reference: model
        • field
        • belongs-to
        • has-many
        • index
      • Data Rules
        • Data Buckets
        • Sync Rules - Limit data synced to devices
        • Data ACLs - Limit access to data
        • Real-world example for Data Rules
        • ❔FAQs
        • Migrate to Data Rules
      • App Indexes
      • Webhooks
    • UI Components
      • All UI Components
        • actionSheet
        • Attachments
        • button
        • button-group
        • capture-coordinates
          • marker
          • marker-query
        • capture-file
        • capture-photo
        • capture-signature
        • card
          • accent
          • action
        • columns
          • column
        • component
        • context-menu
          • divider
          • item
        • CSV
        • date-input
        • datetime-input
        • dialog
          • body
        • display-3d-model
          • 📖display-3d-model Guides
            • Guide 1: Initialize and layout a 3D model in a view
            • Guide 2: Control playback position
            • Guide 3: Troubleshooting controls
        • display-coordinates
        • display-file
        • display-image
        • display-photo
        • display-signature
        • heading
        • html
          • HTML Advanced Topics
          • ❔HTML FAQs
          • 📖Guide: HTML & JourneyApps iFrame Client
        • icons
        • info
        • info-table
          • row
        • journey.photos (capture multiple photos)
        • JourneyPrinter (print PDFs)
        • grid
          • cell
          • 📖grid Examples
        • list
          • list-item
            • accent
            • asset
            • pills
              • pill
            • action
        • multiple-choice-checklist
        • navigation (Navigation drawer)
          • general-section
            • item
          • section
            • item
              • item
          • ❔navigation FAQs
        • notification
        • object-dropdown
        • object-list
          • action
        • object-repeat
        • object-table
          • action
          • column
            • action
            • edit-boolean
            • edit-date
            • edit-datetime
            • edit-integer
            • edit-number
            • edit-select
            • edit-text
            • edit-time
            • edit-typeahead
              • action
            • header-action
          • column-group
          • empty-action
          • 📖object-table Guides
            • Actions
            • Cell callouts
            • Column groups
            • Columns
            • Controlled object-table
            • Controls
            • Copy & paste data
            • Edit cells
            • Filters
            • Frozen columns
            • Fullscreen object-table
            • Mode
            • State
            • Styles
        • optionList
        • PhotonSync (transfer data offline)
        • power-bi
          • 📖Guide: PowerBI Embedding
        • scan-barcode
        • shortcut
        • sidebar
        • single-choice-dropdown
        • single-choice-radio
        • template
        • text-input
        • time-input
        • toggle
        • view
      • JS/TS Events
      • Show / Hide UI Components
      • View Templates
      • XML Fields (Attributes)
        • align-content
        • align-controls
        • align-label
        • bind
        • clear-button-visibility
        • control-order
        • disabled
        • error-message
        • icon-position
        • id
        • hide-if
        • modifier-text
        • label
        • label-case
        • label-color
        • on-change
        • on-press
        • placeholder
        • required
        • show-if
    • JS / TS APIs
      • Attachment
      • Bluetooth (Beta)
      • Broadcast
      • component
      • CSV
      • DB
      • HardwareBarcode
      • journey
        • journey.config
        • journey.container
        • journey.device
        • journey.diagnostics
        • journey.dialog
        • journey.files
        • journey.hardware
        • journey.photos
        • journey.runtime
        • journey.sensors
        • journey.viewStack
      • JourneyPrinter
      • KeyboardBarcode
      • LocalDB
      • NFC
      • OnlineDB
      • PhotonSync
      • SerialPort
      • ShortcutManager
      • TCPSocket
      • user
    • Extend your App with Custom Code
      • App packages
        • App packages overview
        • PDF report package
        • TypeScript library & unit tests
        • Manage External Dependencies
      • Custom HTML
    • Style & Customize your App
      • Style & configure UI components
        • Overview
        • Understand extendable themes
        • Use themes on a view
        • Theme specific components on a view
        • Examples
        • Debugging
        • ❔FAQs
      • Change your App Font
      • Custom Branding
        • Custom Container Features
        • Special Requirements for iOS Containers
    • Integrate your App
      • Backend integrations with CloudCode
      • Barcode Scanning
        • Barcode Scanning using Keyboard Emulation
        • Hardware Barcode Scanning
        • scan-barcode
      • Bluetooth Low Energy (BLE)
      • Broadcast API
      • HTTP requests (Fetch API)
      • JourneyApps Print (Android)
      • Maps and navigation
      • NFC
      • Opening external links/apps
      • Serial Port
      • TCP Sockets
    • Design Intuitive Apps
      • UX Guidelines
      • Write Effective Copy
  • 📱App Features
    • RealWear® Voice Control
      • Automatic Voice Commands
        • Automatic Voice Commands - Advanced
      • Manual Voice Commands
    • App, Runtime and Container Updates
    • Batch Operations (App)
    • Call JS/TS Functions from XML
    • Capture GPS Locations
    • Push Notifications
    • Translations
    • XML Format Strings
    • Webhooks (External)
  • 🌐CloudCode
    • CloudCode Overview
    • Trigger a CloudCode Task
      • Trigger CC with a Schedule
      • Trigger CC via a Webhook
      • Trigger CC from an App
      • Trigger CC from Another Task
      • Trigger CC via HTTP
    • Attachments in CloudCode
    • Timezones
    • Advanced CloudCode Topics
      • Access Multiple DBs in CloudCode Tasks
      • Batch API (CloudCode)
      • CloudCode Dependencies
      • Configure HTTPS in CloudCode
      • Deployment environment variables
      • Local CloudCode Development
      • PDF Reports using CloudCode
      • Shared CloudCode Tasks
      • Translations in CloudCode
  • 📥Backend API
    • Introduction
    • API Reference
      • Retrieve All Objects
      • Query Objects
      • Sort Results
      • Limit and Skip
      • Count Objects
      • Create a New Object
      • Retrieve a Single Object
      • Update a Single Object
      • Delete a Single Object
      • Batch Operations (v4 API)
      • Oplog API
      • Retrieve the App Data Model
      • Manage App Users and Sessions
      • Field Representation
      • Error Responses
    • API Limits
    • Update to the V4 API
  • ⚙️Technical
    • Data Synchronization Priority
    • Device Diagnostics
    • JSON1 Query Engine
    • Improve App Performance
    • Security Measures
    • Supported Platforms
      • Web Container
      • Windows Installer
    • Domain Whitelist
  • 🖥️OXIDE
    • Get started with OXIDE
      • OXIDE Overview
      • Components of OXIDE
    • Configure Testing Deployments
    • Edit and Manage Files
      • How to Navigate to a Function
      • Manage External Dependencies
    • Create and Manage App Containers
    • Debugging & Troubleshooting
      • Common Troubleshooting Pointers
      • App Diagnostics Reports
      • Build Logs
    • OXIDE Workspaces
      • OXIDE Trees
  • ❕Deprecated Features
    • Deprecated Features and Components
Powered by GitBook
On this page
  • Delete an Object
  • Modify an Existing Object
  • Test on Device
  1. Get Started
  2. Tutorial: Build your First App

12. Data Manipulation

Previous11. View ParametersNext13. Responsive Apps

Last updated 2 years ago

Delete an Object

Let's see what we want to add to our punch List app next:

App Design: Construction Punch List

Sometimes our users will add incorrect punches and would need to remove them again. Therefore, we need a feature allowing us to delete punch items.

Let's add a "Delete Selected Item" button to our Main View XML similar to the "View Selected Item" button we already have. We will specify that the button should call the deleteItem function, implying that we'll add a JavaScript function that will delete the selected item. So, on your Main view in your main.view.xml file, add the button as follows.

<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" />

Now add the deleteItem function to the Main view JS. Note that to destroy an object, we simply call .destroy() on the object:

function deleteItem() {
    view.selected_item.destroy();
}

If you test this on a device, you'll see that the item is immediately deleted from the list once you press the button. Normally, it would be advisable to first get the user to confirm before deleting the item, so let's get that confirmation now using a component that is triggered from JavaScript called a. Update your deleteItem function to the following.

function deleteItem() {
    var confirmed = journey.dialog.confirm({
        title: "Delete Item?",
        message: "Are you sure?",
        okButton: { text: "YES", color: "positive" },
        cancelButton: "NO"
    });
    if (confirmed) {
        view.selected_item.destroy();
    }
}

Modify an Existing Object

We head on to our next requirement:

App Design: Construction Punch List

Our app allows us to add new punch list items which have a status of "Open", but we need a feature to allow the user to mark a punch item as "Completed" or "Closed" when the punch has been taken care of.

Let's add this feature to the "View Item" screen of our app. Open up the view_item view and add a new button to the View XML that will allow the user to 'Mark as Closed'. To add some variety and complexity, let's navigate to a new view that we will use as a confirmation page.

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

We specified on-press="markClosed" above, so let's add that function on the JavaScript side. So, on your "View Item" view, in the view_item.js file, add the following.

function markClosed() {
    view.item.status = "Closed";
    view.item.save();
    notification.success("Item marked as closed");
    navigate.link('completed_item', view.item);
}

At this point, your View Item code should look like this

XML

<?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>
    <info-table>
        <row label="Item Comments" bind="item.comments" />
        <row label="Item Status" bind="item.status" />
        <row label="Current Time" value="{$:showTime()}" />
    </info-table>

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

</view>

JS

// This function is called when the app navigates to this view (using a link)
function init() {
    // initialize any data here that should be available when the view is shown
}

// This function is called when the user returns to this view from another view
function resume(from) {
    // from.back       (true/false) if true, the user pressed the "Back" button to return to this view
    // from.dismissed  (true/false) if true, the app dismissed to return to this view
    // from.path       contains the path of the view that the user returned from
    // if any data needs to be refreshed when the user returns to this view, you can do that here:
}

function showTime() {
    var now = new Date(); // standard JS function to get the current date and time
    return now.toLocaleString(); // changes the DateTime object into a string according to local conventions
}

function markClosed() {
    view.item.status = "Closed";
    view.item.save();
    notification.success("Item marked as closed");
    navigate.link('completed_item', view.item);
}

Let's create the Completed Item view, remember the name of the view should be completed_item and once created update the title of the view to "Completed Punch Item". Then we will also add some components to use for the confirmation.

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

    <!-- Components go here: -->
    <heading>Item Completed!</heading>
    <info>This item is now completed and will no longer show up in the list of Open Snags</info>    

    <button label="Go Home" on-press="goHome" validate="false" style="solid" />
</view>

Finally, we need to create the JS function goHome to take us all the way back to the Main view. Up to now we have been using the discard and dismiss navigation actions to pop the current view off of the view stack and return to the previous one. But this will not work for the Completed Punch Item view, as we will have more than one view to "pop" off the stack to get to back to the main view. To do this, we need to dismiss or discard all the way back to a specific view currently on the view stack.

So, to do this we simply pass the name of the view we want to dismiss/discard to as an argument to the navigate.dismiss (or navigate.discard) action. Note: This will dismiss/discard views until it reaches the specified view. If the specified view is not on the stack then the operation will error. Therefore, in your completed_item.js file define the following function.

function goHome() {
    navigate.dismiss("main");
}

So, the code on your completed_item view should now look like this.

XML

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

    <!-- Components go here: -->
    <heading>Item Completed!</heading>
    <info>This item is now completed and will no longer show up in the list of Open Snags</info>    

    <button label="Go Home" on-press="goHome" validate="false" style="solid" />
</view>

JS

// This function is called when the app navigates to this view (using a link)
function init() {
    // initialize any data here that should be available when the view is shown
}

// This function is called when the user returns to this view from another view
function resume(from) {
    // from.back       (true/false) if true, the user pressed the "Back" button to return to this view
    // from.dismissed  (true/false) if true, the app dismissed to return to this view
    // from.path       contains the path of the view that the user returned from
    // if any data needs to be refreshed when the user returns to this view, you can do that here:
}

function goHome() {
    navigate.dismiss("main");
}

Test on Device

Let's test it out. Your app should now look like this.

Good Work! The first part of the Punch List App is all done. Next up we are going to make the app more user friendly for tablet, desktop and web users.

🚀
confirm dialog