LogoLogo
  • Adapptio User Documentation
  • Getting Started
    • Quickstart
    • Architecture Overview
      • Views
      • Actions
      • Integrations
      • API Endpoints
      • Routes
      • Events
      • Assets
    • Editor
      • Main Menu
        • Create New Resources
        • Manage the Application
        • Monitoring Errors
      • Main Toolbar
        • Deploying the Application
        • Opening the Application
        • Preview Mode
        • Error Monitor
      • Components Panel
        • Components
        • Inspector
        • View Settings
      • Outline Panel
        • Data Variables
          • State Variable
          • Data From Action
      • Data Explorer
      • Console
    • Playground
  • Working with Adapptio
    • Best Practices
    • Tutorials
      • 1. Hello World
      • 2. Visualize Data from API
      • 3. Advanced Layout Application
      • 4. Application with In-Memory Database
    • How To
      • Custom Auth
      • Action Logic
        • Transform Node
      • UI Logic
        • Logout
        • Conditional Render
        • One Of
      • Data & Dynamic values
        • Custom Variable
        • Data from Action
        • Dynamic Value
        • Change Value from Event
        • Loading Data from Action to Form
        • Sending Data to Action from a Form
        • Server-side Dropdown Autocompletion
      • Visual
        • Styling Icon Button
      • Layouts
        • Centered Box
        • Header & Sidebar Layout
        • Grid Form Layout
        • Stretched Layout in Row
    • Components
      • Composed Chart
      • Advanced Table
      • Custom Component
    • Examples of Applications
      • SaaS Platforms
      • Customers Portals
      • Information Systems
      • Internal Tools
        • Color Picker
      • IoT Applications
      • Smart Portals
      • Analytics & Calculators
      • Statistics & Monitoring Panels
      • API Data Visualization
      • Simple Games
  • DEPLOYMENT
    • Cloud Hosted
    • Self Hosted
  • REFERENCE GUIDE
    • Components List
      • Application Header
      • Box
      • Container
      • Grid
      • Sidebar Layout
      • View
      • Text Input
      • Number
      • Checkbox
      • Option
      • Date and Time
      • File Upload
    • Properties
      • ACCEPT
      • CUSTOM PLACEHOLDER
      • DESCRIPTION
      • ENABLED
      • FONT SIZE
      • FOREGROUND COLOR
      • FORM DATA KEY
      • HEADERS
      • ICON
      • ID
      • LABEL
      • METHOD
      • MULTIPLE
      • MAX FILE SIZE
      • REQUEST TIMEOUT
      • REQUIRED
      • READ-ONLY
      • SIZE
      • TEXT ALIGNMENT
      • TEXT STYLE
      • URL
      • UPLOAD IMMEDIATELY
      • VALIDATE
      • VALUE
    • Functions
      • Array
      • Date
      • Generators
      • JSON
      • Logic
      • Math
      • Object
      • String
      • Types
      • Util
  • Support
    • Get in touch
    • Release Notes
  • Legal
    • Terms and Conditions
    • GDPR
Powered by GitBook
On this page
  • Accessing Flow Variables
  • Real-world Example

Was this helpful?

  1. Working with Adapptio
  2. How To
  3. Action Logic

Transform Node

Transform node allows you to transform data in the action flow using plain JavaScript.

  1. To start, place the Transform node into your action flow.

  2. In the Inspector, find the Source Code property. This is where you can put your JavaScript code. Please, don't switch to fx in this case. The JS code is entered as plain text. If you switch to fx, it means you define the source code with an expression.

  3. If you want to use the Transform's output in other flow nodes, don't forget to configure the node's ID (variable name).

Your JavaScript code is executed in the sandboxed environment. This means you have no access to the browser or Node.js APIs. But you can use simple built-in functions like bota, atob, encodeURIComponent and so on.

Accessing Flow Variables

Because you are writing a JavaScript and not an Adapptio expression, you have to reference flow variables differently. There is a global variable $ (dollar sign) which contains all flow variables as properties.

Examples:

$.myApiNode
$.myApiNode.data
$.myAnotherNodeId

Real-world Example

This example demonstrates how to group a list of invoices by subject and calculate the aggregated sum of invoiced amounts for each of them.

/* Data structure of invoices:
[
    {
        id: 1,
        your_name: "My Company",
        your_street: "Street 123",
        your_city: "Prague",
        your_country: "CZ",
        client_name: "Client Company",
        client_street: "Street 456",
        client_city: "London",
        client_country: "UK",
        subject_id: 1, // Unique ID of client
        total: 24350,
        ...
    }
]
*/
const invoices = $.apiInvoice.data;

// Let's create a map of Subject (customer) -> { info, total amount }
const subjects = new Map();

// Iterate through all invoices
for (let i = 0; i < invoices.length; i++) {
    const invoice = invoices[i];

    // If the subject (customer) does not exist in the map, create it
    if (!subjects.has(invoice.subject_id)) {
        subjects.set(invoice.subject_id, {
            // Store info about the subject
            subject_id: invoice.subject_id,
            name: invoice.client_name,
            street: invoice.client_street,
            city: invoice.client_city,
            client_country: invoice.client_country,
            // Prepare the total amount counter
            total: 0
        });
    }

    // Add invoice amount to the subject
    const subject = subjects.get(invoice.subject_id);
    subject.total += parseFloat(invoice.total);
}

// Return subjects as an array so we can work with them in UI more easily (like displaying them in a table)
return Array.from(subjects.values());
PreviousAction LogicNextUI Logic

Last updated 2 years ago

Was this helpful?