LogoLogo
GitHubBlynk WebsiteLogin to Blynk.Console
  • Introduction
  • Getting Started
    • Supported Hardware
    • Quickstart
      • Next Steps After Quickstart
      • Quickstart Device: Code Overview
      • Troubleshooting
    • Device Activation Methods
      • Manual Device Activation
      • WiFi provisioning
      • Static Token
    • Template Quick Setup
      • Set Up Datastreams
      • Set Up Web Dashboard
      • Set Up Mobile App Dashboard
      • Prepare Your Code
      • Test your Template
    • Send Data From Hardware To Blynk
    • Control Devices (GPIOs and beyond)
    • Events
    • Notifications (Alerts)
    • Sign Up / Sign In
  • General Concepts
    • Developer Mode
    • Device
    • Device Template
    • Connection Lifecycle
      • Disconnections And Heartbeat
    • Users
      • Multi-tenancy
    • Organizations
    • Automations
      • Forward Device Data
  • Message Usage
  • Integration Guides
    • Node-RED
    • The Things Stack
      • Getting Started
      • Device Grouping
      • Automated Device Onboarding
      • System DataStreams
    • Blues
    • NCD Industrial Vibration Sensor
    • Particle - monitor with Blynk
    • Particle - control with Blynk
    • AWS IoT Core
  • Myriota
  • OpenWeather
  • Blynk.Console
    • Overview
    • Dashboards
      • Dashboard Widgets
    • Devices
      • Device profile
        • Dashboard
        • Device Info & Metadata
        • Notifications & Events
        • Developer tools
          • General
          • Datastreams
          • Testing
          • Actions Log
      • Actions with devices
      • Segments
      • Filters
      • Notifications Settings
      • Device Sharing
    • Locations
      • Location Profile
      • Assigning Devices to the Locations
    • Organizations
      • Create a Sub-Organization
      • Working with Sub-Organizations
    • Users
      • User Profile
    • Device Templates
      • Working With Templates
      • Info
        • Offline Ignore Period
        • Manufacturer
        • Template ID
        • Categories
        • Hotspot Prefix
      • Datastreams
        • Datastream Settings
          • Name
          • Alias
          • Virtual Pin
          • Color
          • Data Type
          • Min Value
          • Max Value
          • Default Value
          • Save RAW Data
          • Invalidate Value
          • Wait for confirmation from device
          • Sync with latest server value every time device connects to the cloud
          • Expose to Voice Assistants
        • Virtual Pin
        • Location
        • Enumerable
      • Web Dashboard
        • Multiple Dashboard Tabs
      • Metadata
        • Metadata Tutorial
      • Connection Lifecycle
      • Events
        • Custom Events
          • Event Settings
          • How to Send/Log Events
          • Content Events
        • Notifications Settings
          • Custom Sounds and Critical Notifications
      • User Guides
      • Assets
    • Widgets (Console)
      • Switch
      • Slider
      • Number Input
      • Image Button
      • Web Page Image Button
      • LED
      • Label
      • Gauge
      • Chart
      • Map
      • Image Gallery
      • Custom Chart
      • Heatmap Chart
      • Video
      • Bitmask Table
      • Gradient Ramp
      • Terminal
      • Segmented Switch
      • Alarm & Sound Widget
      • Modules
    • Blynk.Air
      • Shipment Details
      • Shipment Management
        • New Shipping
      • Device shipment statuses
      • User-Controlled Shipments
    • Settings
      • Organization Settings
        • General
        • Users
        • Locations (Job Site or Facilities)
        • Tags
      • Roles and Permissions
      • Developers
        • OAuth2
        • Webhooks
        • Create New Webhook
      • Integrations
    • User Profile Menu
    • Limits
  • Blynk.Apps
    • Overview
    • Mobile Dashboard Editor
    • Device Header Constructor
      • Header Design
      • Header Mini Widgets
        • Connection Status Widget
        • Last Reported Widget
        • Tabs Widget
        • Datastream Value Widget
        • Image Widget
        • Battery Level Widget
        • Signal Level Widget
        • Tags Widget
      • Header Buttons
    • Pages
    • Widgets (app)
      • Common Widget Settings
      • List of Datastreams types supported by Widgets
    • Widgets Controllers
      • Button
      • Styled Button
      • Icon Button
      • Image Button
      • Slider
      • Vertical Slider
      • Step Slider
      • Vertical Step Slider
      • Joystick
      • zeRGBa
      • RGB Light Control
      • Step H
      • Step V
      • Slope Control
      • Switch
      • Level Slider
      • Level Slider with Switch
    • Widgets Displays
      • Value Display
      • Labeled Value
      • LED
      • Gauge
      • Radial Gauge
      • Enhanced Gauge
      • LCD
      • Simple Chart
      • SuperChart
      • Terminal
      • Video Stream
      • Level H
      • Level V
      • Image Gallery
      • Gradient Ramp
      • Icon
      • Image Animation
      • Lottie Animation
    • Widgets Interface
      • Tabs
      • Menu
      • Map
      • Text Input
      • Numeric Input
      • Time input
      • Segmented Switch
      • Icon Segmented Switch
      • Text
      • Formatted Text
      • Dynamic Spacer
    • Widgets Other
      • Music Player
      • WebPage Button
      • WebPage Image Button
      • Alias Name
    • Main Menu
      • My Profile
      • Organization
      • Settings
      • Help
      • About
      • Log Out
    • Devices
      • Add New Device
    • Automations
    • Notifications & Events
  • Blynk.Edgent
    • Blynk.Edgent overview
    • Blynk.Inject and Blynk.Air
    • OTA: Firmware Over-The-Air updates
  • Blynk.NCP
    • Blynk.NCP overview
    • Supported Connectivity Modules
    • OTA: Firmware Over-The-Air updates
  • Blynk Library - firmware API
    • Installation
      • Install Blynk Library in Arduino IDE
      • Install Blynk Library for Platformio.org
      • Install ESP8266 core for Arduino IDE
    • Configuration
    • Connection Management
    • Device Online/Offline Status
    • Digital/Analog Pins
    • Virtual Pins
    • Widget Properties
    • State Syncing
    • Timers
    • Time (RTC clock)
    • Timezone / Location
    • Log Event
    • Metadata
    • Debug
    • Reboot
    • Over-The-Air Firmware Updates (OTA)
    • Other
    • Limitations and Recommendations
    • Blynk Protocol
  • BLYNK.CLOUD MQTT API
    • Device MQTT API
      • Authentication
      • Topic Structure
      • Datastreams
      • Widget Properties
      • Events
      • Metadata
      • Timezone/Location
      • OTA
      • Miscelaneous
      • Code Examples
  • BLYNK.CLOUD HTTPS API
    • Device HTTPS API
      • Get Datastream Value
      • Get Multiple Datastream Values
      • Get Historical Data From Device
      • Update Datastream Value
      • Update Multiple Datastreams Simultaneously
      • Upload a Set of Timestamped Data
      • Update Widget/Datastream Property
      • Send/Log An Event
      • Get Device Metadata Value
      • Update Device Metadata Value
      • Is Device Connected
      • Upload a File
      • HTTPS API Troubleshooting
    • Platform API
      • Authentication
      • Ogranization API
        • Get Own Organization Info
        • Get Organization Info
        • Search Organizations
        • Create Organization
        • Get Static Tokens
        • Get Organization Tags
        • Get Organization Automations
      • Devices API
        • Get All Devices
        • Search Devices
        • Get Devices by Owner Email
        • Get Devices in user organization
        • Get Recently Activated Devices
        • Get Device Info
        • Get Connection Status
        • Create Device
        • Edit Device
        • Get Datastream Values
        • Update Datastream Value
        • Update Multiple Datastreams Values
        • Import Datastream Values
        • Update Datastream Property
        • Get Datastream Historical Data
        • Get Device Metadata
        • Update Device Metadata
        • Get Device Tags
        • Get Device Timeline Log
        • Log a Device Event
        • Get Actions Log
        • Erase All Data
        • Remove Device Owner
        • Transfer Device
        • Delete Device
      • Users API
        • Get All Users
        • Search Users
        • Create New User
        • Invite User
        • Get User Info
        • Update User Role
      • Templates API
        • Get All Templates
        • Get Template Info
        • Get Template Metadata
        • Get Template Datastreams
        • Get Template Events
    • Security
  • Downloads
    • Blynk Mobile Apps
    • Blynk Library
  • Troubleshooting
    • General Issues
    • Developer Mode
    • Changes from Blynk 0.1
      • Migrating to the new Blynk - Full Guide
    • Glossary
    • Links
  • Commercial Use
    • Deploying Products With Dynamic AuthTokens
    • Deploying Products With Static Tokens
    • Working With Clients
    • Supported topologies
    • Business Plan (White Label Solution)
      • App Publishing Process And Timeline
      • What's Needed To Publish Your Apps And Go Live
      • Branding Materials
      • Custom Email Address For Transactional Emails
      • Application Settings
        • General
        • Design
        • Mobile Apps
        • Sign Up
  • Add-Ons
    • Add-on list
    • Amazon Alexa
    • Google Assistant
    • Localization
    • Database Access
    • Marketing
Powered by GitBook
On this page
  • Examples of page use
  • Types of pages and navigation
  • Standalone pages
  • Examples of sheets use
  • Creating a new page
  • Editing a page
  • Linking page to an entry point
  • Opening pages by end-users
  • Changing target page from hardware
  • Device Info Tabs
  • Adding a device info tab
  • Editing tab contents
  • Reordering the tabs
  • Deleting The Tab
  • Device Welcome Page

Was this helpful?

  1. Blynk.Apps

Pages

PreviousHeader ButtonsNextWidgets (app)

Last updated 1 year ago

Was this helpful?

With Pages you can add multiple pages to a device dashboard. This helps to better organize the UI and build connections between sections of your device dashboard.

Examples of page use

  • Device Settings. Let's say you plan to use a group of widgets for various Settings. This is not something your end-users will be using very often, so it makes sense to organize Settings widgets as into a separate page. For end-users, there will be a tiny icon in the UI which will open this page.

  • View More Data. Imagine you have a sensor value displayed on the dashboard and you would like to show more data, like historical data chart, explanations how to read this, show additional data points etc. To de-clutter the user interface, you can create a button which will open a page with all of this additional information.

  • Technical Dashboard. Imagine you have a technical dashboard that should only be seen by users with a certain role. With Pages, you can add a tab in Device Info and define which user roles can access this tab. Users with other roles will not see this dashboard.

Pages feature is available in paid plans only. You can always upgrade in your Account Settings.

Types of pages and navigation

There are three types of pages you can add:

  • Standalone pages

  • Pages (tabs) in Device Info

  • Device Welcome page

Standalone Pages can be interconnected. You can open Page A from Page B or Page C in any order. Just keep the navigation simple and clear for end-users.

End users open Pages by tapping on widgets which are set as entry points. Users can always go back to the previous view.

Device Info Pages can only be accessed in Device Info view.

Standalone pages

These pages are opened by tapping on widgets that are set as entry points.

You can create standalone pages of two formats: full-screen or sheets.

Full Screen page opens a dedicated full-screen view. Different animations of screen appearance are available (how the page appears on screen). The page can slide in from the bottom or from the right.

Sheets open pages as sheets from the bottom of the screen, with the option to pre-define the sheet size and can be closed by the user with a swipe.

Examples of sheets use

  • Placing additional controls. Create a sub-screen for additional functionality. E.g.: main screen - list of drinks, drink selection. Sheet - adjustments, settings and options for the selected drink.

  • Confirmation. Let users confirm the effects of the selected settings.

  • Dynamic information. Show more data, including textual, graphs, images and other that will enrich your user experience without taking the space of your main screen.

  • Quick interaction. Imagine a weather station, or smart lighting calibration process, where users would frequently need to reset (purge) all settings.

Creating a new page

  1. Go to ToolBar → Pages → Standalone Pages

  2. Tap + Add Page

  3. Give your new page a name

  4. Tap Create in the top right corner

  5. Adjust the animation or size if necessary

  6. Your new page is created

Editing a page

After you have created a new page, tap on it to start editing. You will see a familiar canvas with the grid where you can add widgets.

Tap on the gear icon to access page settings, where you can Rename or Delete the page.

You can always access all of the pages and edit them in ToolBar → Pages

Linking page to an entry point

Once the page layout is ready, you need to define a page entry point. In Blynk, an entry point is a widget configured to open pages.

Widgets that can be used as entry points:

  • Button

  • Styled Button

  • Icon Button

  • Image Button

To create an entry point:

  1. Add one of the supported widgets to the dashboard (check supported widgets below)

  2. Open Widget Settings

  3. Set Mode to Page

  4. Choose the Page to open

Opening pages by end-users

After the page has been set up and connected to an entry point widget, it's ready for use.

  1. Exit Developer Mode

  2. Open the device

  3. Tap on the entry point widget

  4. A page should open

  5. Press Back to return to the entry point (or swipe down if it's a sheet)

Changing target page from hardware

You can change the target page from the device using firmware API. When this command is used, a widget will open a page with a specified index.

Page index can be found

  1. Create a new datastream. For example: PageIndex

  2. Add a widget that should open a page

  3. Set it's datastream to PageIndex

  4. Set mode to PAGE

  5. Choose default page

  6. On your device use the command:

setProperty (vPin, "page", page_index)

vPin is a Virtual Pin number of the widget.

index is the id of the page this widget should open. It can be found in Toolbox -> Pages.

Device Info Tabs

You can also add Pages (in the format of Tabs) to "More.." menu on device Dashboard. By default, this view has 2 tabs: Device Info and Timeline. They can't be deleted or removed.

To see these tabs, end-users will need to open Device Info. This is the only entry point.

Unlike Standalone Pages, you can define which users can access the tab. For example, if you choose Admins only, users with other roles will not see this tab. This can be useful when you need to place some technical information which is only needed for administrators.

Adding a device info tab

  1. Go to Toolbox → Pages → Device Info Tabs

  2. Tap + Add Page

  3. Give your new tab a name

  4. Set access permissions (optional)

  5. Tap Create in the top right corner

  6. A new tab page is created

Editing tab contents

After you have created a new tab, tap on it to start editing. You will see a familiar canvas with the grid where you can add widgets.

You can always access list of added tabs in ToolBar → Pages → Device Info Tabs

Reordering the tabs

To change the order of tabs:

  1. Tap and hold the tab you want to move

  2. Drag and drop to desired position

Deleting The Tab

To delete the tab, swipe left in the list of Tabs . Keep in mind that this will delete all widgets on the tab.

Alternatively, you can delete the tab during editing.

Device Welcome Page

This is a special page that can be shown after the device was added using device provisioning or device claiming.

It's a good place to explain to your customers how device works, or walk them through the initial configuration.

Device Welcome Page is set up similarly to a Standalone Page described above using widgets

Web page

Optionally, instead of page with widgets you can set up a web page to show after the device was added. In this case, the in-app browser will open automatically with the specified page.

Make sure that the web page is mobile-friendly so that it renders correctly in the in-app browser.