• Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Arrow
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Spine Animation
      • Lottie Animation
      • Avatar
      • Canvas
      • Particle
      • Render Kit
      • Speech Player
      • Video
    • Maps
      • Google Maps
      • Offline Map
      • Offline Map Route Editor
      • Map creation guide
      • Beacon installation for indoor mapping
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Cloud Services
    • Overview of Cloud Services
    • Google Analytics
    • Umajin Analytics
  • Publishing
    • Introduction
    • Umajin Editor Lite
    • iOS – Apple App Store
    • Android – Google Play Store
    • Mac
    • Windows
Menu
  • Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Arrow
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Spine Animation
      • Lottie Animation
      • Avatar
      • Canvas
      • Particle
      • Render Kit
      • Speech Player
      • Video
    • Maps
      • Google Maps
      • Offline Map
      • Offline Map Route Editor
      • Map creation guide
      • Beacon installation for indoor mapping
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Cloud Services
    • Overview of Cloud Services
    • Google Analytics
    • Umajin Analytics
  • Publishing
    • Introduction
    • Umajin Editor Lite
    • iOS – Apple App Store
    • Android – Google Play Store
    • Mac
    • Windows
Components > Dynamic Article Tutorial
Dynamic Article Tutorial
Components,Intermediate
  
September 7, 2017
  
admin

Adding a Dynamic Article to your Project’s page with new content

Overview

The Dynamic Article displays HTML content in your project that you maintain in Umajin’s Cloud Services, http://cloud.umajin.com. This allows you to feed fresh content such as products, campaigns, special store offers, opening hours etc without having to republish your app.
 
In this tutorial we’ll be fitting a dynamic article to a page, creating content for on the cloud services platform and then linking it to our dynamic article. We use the Umajin Editor and the Cloud Services site to achieve that.

Prerequisites

  1. Umajin Editor downloaded and installed
  2. Be competent working with components and their properties.
  3. Have a basic understanding of HTML and CSS

 

Instructions

Step 1) Umajin Editor: Create a new blank project in the Umajin Editor.

Step 2) Add a Dynamic Article component to a page using the component picker. Its properties panel is shown here.

Step 2) To create the HTML document we go to Dynamic Articles section of the Cloud Service site in a browser via the properties cloud link button at Data Binding, Article ID:

Step 4) Cloud Services: Create a new document using “+Add”

Step 5) Give your document a title and content and save before returning to Umajin Editor.

Step 6) Umajin Editor: We’ll now select our document for the Dynamic Article component. With the properties folder button to bring up the list of documents from the Cloud Services.

Step 7) Select your newly created document from the list.

Your document is now linked to your Dynamic Article. Any changes made to the online document will change your Dynamic Article content.

 

Styling and CSS

See the tutorial on dynamic articles – mapping styles and CSS for working with the app page-level HTML styling.

 

  • Umajin
  • Developers
  • Support Home
Menu
  • Umajin
  • Developers
  • Support Home