• PRODUCT

    PRODUCT

  • PRICING
    PRICING

  • HELP
    HELP

  • BLOG
    BLOG

  • APPSTORE
    APPSTORE

  • COMPANY
    COMPANY

  • LEGAL
    LEGAL

  • LOGIN
    LOGIN

  • Workflow Automation

    Workflow Automation

  • AI Assisted Content Management System
    AI Assisted Content Management System

  • Analytics & Lead Generation
    Analytics & Lead Generation

  • Automation Projects
    Automation Projects

  • Browser Extension Apps
    Browser Extension Apps

  • Dashboard Theme Analysis: LN1
    Dashboard Theme Analysis: LN1

  • Data Exchange Automation Tools
    Data Exchange Automation Tools

  • Getting Started With Building Hybrid Apps
    Getting Started With Building Hybrid Apps

  • Izyware Hybrid UX Design Guidelines
    Izyware Hybrid UX Design Guidelines

  • Onboarding New Organizations Using Izyware
    Onboarding New Organizations Using Izyware

  • Quick Visualization and Monitoring
    Quick Visualization and Monitoring

  • Unified Metrics Stream Pipeline
    Unified Metrics Stream Pipeline

  • Legacy Features and Backward Compatibility
    Legacy Features and Backward Compatibility

  • How does the legacy frame architecture work
    How does the legacy frame architecture work

  • Izyware Legacy UI Circus Engine
    Izyware Legacy UI Circus Engine

  • Case Studies and Knowledge Center
    Case Studies and Knowledge Center

  • Angular and React Embedding Guide
    Angular and React Embedding Guide

  • Build and deploy a content distribution app in less than five minutes: Part II
    Build and deploy a content distribution app in less than five minutes: Part II

  • Comparison of CSS Preprocessors SASS vs LESS vs STYLUS
    Comparison of CSS Preprocessors SASS vs LESS vs STYLUS

  • Comparison of node.js test frameworks and utilities: lab, chai, sinon
    Comparison of node.js test frameworks and utilities: lab, chai, sinon

  • Manage and automate your day to day business tools using IzyCloud Tasks: Part I
    Manage and automate your day to day business tools using IzyCloud Tasks: Part I

  • MySql Performance Optimization
    MySql Performance Optimization

  • Onboarding Tutorial: Creating & publishing an app
    Onboarding Tutorial: Creating & publishing an app

  • Rebranding and Customizing Websites
    Rebranding and Customizing Websites

  • Using IzyCloud on Android: IzyCloud Query App
    Using IzyCloud on Android: IzyCloud Query App

  • Technical Resources
    Technical Resources

  • .NET SDKCore IzyWare
    .NET SDKCore IzyWare

  • av-stream README
    av-stream README

  • ElasticSearch IzyWare Data Console Feature
    ElasticSearch IzyWare Data Console Feature

  • End To End Testing
    End To End Testing

  • End To End Testing, Part II
    End To End Testing, Part II

  • frames and nav (ui/w/shell/navmulti) README
    frames and nav (ui/w/shell/navmulti) README

  • izy-circus README
    izy-circus README

  • izy-idman-tools README
    izy-idman-tools README

  • izy-pop3 README
    izy-pop3 README

  • izy-proxy README
    izy-proxy README

  • izy-sync README
    izy-sync README

  • IzyIDE README
    IzyIDE README

  • izymodtask readme
    izymodtask readme

  • IzyShell readme
    IzyShell readme

  • ReKey Feature Package README for IzyWare SQL Console
    ReKey Feature Package README for IzyWare SQL Console

  • Single Sign-On (SSO) README
    Single Sign-On (SSO) README

  • Tasks Migration : V5 guidelines
    Tasks Migration : V5 guidelines

  • Users & Groups README
    Users & Groups README

  • V5 Migration : apps/pulse guidelines README
    V5 Migration : apps/pulse guidelines README

  • Container Orchestration
    Container Orchestration

  • Izy Kubernetes Internal Networking Troubleshooting
    Izy Kubernetes Internal Networking Troubleshooting

  • Application Hosting
    Application Hosting

  • Content Publisher
    Content Publisher

  • Domain Registration
    Domain Registration

  • Email Hosting
    Email Hosting

  • Izyware Browser Extension
    Izyware Browser Extension

  • Izyware Deployment Engine
    Izyware Deployment Engine

  • Izyware Session Management
    Izyware Session Management

  • Messaging System APIs and functionality
    Messaging System APIs and functionality

  • Single SignOn
    Single SignOn

  • Integration APIs
    Integration APIs

  • iOS SDK
    iOS SDK

  • Azure and .NET
    Azure and .NET

  • izy-devops
    izy-devops

  • << Users & Groups README
    << Users & Groups README

  • Container Orchestration >>
    Container Orchestration >>

  • V5 Migration : apps/pulse guidelines README

  • As you prepare for migrating your apps to V5, verify that your source environment is supported and that you have addressed any prerequisites. This document captures improvements and guidelines that can be used for migration to V5.

  • View

    • replace 'framestate' and .kvs with 'kvsValidated'
    • get rid of replaceTargetElement, isolateNav unless they are needed
    • delete state.js file

    modtask.apiExecutionContext = '//izyware/';

    ['htmlcomponent.create', { ... }]

    onnavigate

    • block...
    • queryParams

    ['frame_getkey', ['kvsValidated']],

    ['htmlcomponent.getComponentParameters'],

    function(chain) {

    chain([

    [modtask.apiExecutionContext + 'rel:api?queryGroups', {

    / mandatory circus properties /

    kvsValidated: modtask.kvsValidated,

    // componentParameters

    parameters: chain.get('outcome').data

    / end of mandatory circus properties /

    }]

    ]);

    },

    ['htmlcomponentdefault.handlenon200']

    • project the groups into the canvas

    var data = chain.get('outcome').data;

    // note: groupsmembers.metaItems will be automaticaly verified and applied if present.

    chain([

    ['circus.addUriProperties', {

    items: data.groupsmembers.buttons,

    properties: ['hrefUri'],

    ignoreMissingLinks: true

    }],

    ['htmlcomponent.updateGroupsMembers', data.groupsmembers, data.groupsoptions],

    ['htmlcomponent.setGroupsParameters', data.groupsparameters]

    ]);

    Event Handling

    • for layered views that use parameterized components, pass in structures consistent with what is used for canvas groups parameters and memebers (componentPath, etc.), i.e. :

    chain(['frame_notify', {

    success: true,

    action: 'showAreaAction',

    actionComponents: [{

    componentPath: modtask.ldmod('kernel/path').rel('../edit'),

    obj: chain.get('outcome').data.obj

    }]

    }]);

    API

    • rename actions.schema to schemaUriToKVS and remove modtask.kvsSchema at top level
    • use sql. chain

    ['frame_getnode', modtask],

    function(chain) {

    chain(['chain.importProcessor', 'sql/jsonnode:chain', {

    dbConnection: modtask.node

    }]);

    },

    ['sql.select', { .. }]

    • use the improved signature based for getting the session package flags:

    ['chain.importProcessor', 'apps/accountmanager/5/sessionfeature:chainprocessor'],

    ['features=session.pkgflags']
    • standard circus objects

    groupsparameters = {

    title: obj.title,

    tabs: [queryObject.kvsValidated.tab],

    selectedTab: {

    componentPath: allTabs[queryObject.kvsValidated.tab],

    obj: obj

    }

    };

    groupsmembers.title = groupsparameters.title;

    ...

    groupsoptions = {

    tabs: {

    indexProperty: 'id',

    valueMapping: 'pickbyindex'

    }

    }

    return chain(['outcome', {

    success: true,

    status: status,

    data: {

    groupsmembers: groupsmembers,

    groupsparameters: groupsparameters,

    groupsoptions: groupsoptions

    }

    }]);

    standard and metaFields

    If constructing by SQL, the following metaFields are important:
    • itemType: Mandatory
    * circus.addUriProperties

    * creation of groupsmembers.metaItems

    • id: Mandatory, if not present return 1

    * object selection in UI and context mapping across context menus

    * circus.addUriProperties
    • address: Mandatory, if not present in data return default.
    * circus.addUriProperties
    • isOwnedBySession: Interally used by query builder for ACL
    • owners: can be deserialized to show owners of an object

    groupsparameters mapping to HTML elements values

    • first the proper HTML element(s) is located using the (valueMapping, indexProperty) defined through the groupsoptions
    • for each element, the parameter is get/set based on the type

    * for input, textarea it will properly be get/set

    * for izy-region components, it gets exchanged as "componentParameter"

    * for all others

    * if $izyinputvalue is present in the class it will get replaced (this is uni-directional -- only setting)

    * otherwise the innerHTML will be set to the "escaped" value

    * if you need to explcitily turn off escaping the values set the escape attribute to 0

    componentParameter From Host

    • Getting the current values

    ['htmlcomponent.getGroupsParameters']

    • Settings the current values

    ['htmlcomponent.setGroupsParameters']

    componentParameter inside the hosted component

    • Getting the value set via setGroupsParameters by the host canvas

    ['htmlcomponent.getComponentParameters']

    • Settings the value that the host will recieve on getGroupsParameters

    ['htmlcomponent.setComponentParameters'

    HTML canvas

    • always define izy-focus
    • component embedding

    * The following guidelines are recommended for maximum portability in reusable component. If the goal is not to build reusable components then these guidelines can be ignored.

    * for component "componentPath"

    * always have a "embedder" root with "position:absolute" with all 4 coordinates set to 0

    * Use either a embedder$izyid or one of the popupambience, etc.

    * This technique will ensure that the root is "positioned" so that all the subsequent positions (relative, absolute) in the component will be in reference to this div.

    * Zeroing of all coordinates inside the component root div gaurantee that the component will fill up the entire space defined by host

    * The host HTML should use the currentItemWrapper$izyid div a "positioned" div element

    * This will define the boundaries and placement of the component being embedded

    * at a minimum position: relative should be used for currentItemWrapper$izyid if absolute is not to be used.

    • always have blockOverlay and errorarea elements

    * responsiveness

    * errorhandling
    • clickable elements
    * use objindex="$index" on canvas and extract object on the on-click for non href stuff
    • CSS
    * variables are supported via cssData on htmlcomponent.create

    * sometimes groups data need to be applied to CSS (i.e. background image uris for login page). You can use htmlcomponent.updateSelector

    ['circus.addUriProperties', {

    items: data.groupsmembers,

    properties: ['imgUri']

    }],

    function(chain) {

    chain(['htmlcomponent.updateSelector', {

    '.imgUriBackgroundImage$izyid': 'background-image: url("' + data.groupsmembers.imgUri + '"), linear-gradient(rgb(43, 57, 70), rgb(56, 74, 91));'

    }]);

    }

    The following subsections provide general guidelines for ui effects and html elements.

    Images

    • use circus.addUriProperties with imgUri
    • include the itemType for non pulseItems

    var itemType = modtask.ldmod('izyware/acl/sql').tableNameToItemType['appstore'];

    itemType: 'NOQUOTE' + itemType,
    • this will ensure that the crawable thing will be captured
    • when possible put the image(s) in their own bucket (i.e. when individual page associated with image) because images typically have non user viewable metadata (id, title, alt, etc.) associated with them.

    title

    Anchor Elements

    • use circus.addUriProperties with hrefUri
    • place the hrefUri in the href property
    • this will ensure right click and open in new tab will work
    • Dont give links contextual names (back / forward, etc. are contextual)
    • when possible put the anchor(s) in their own bucket because of the non user viewable metadata (similar to images)

    groupsmembers.anchorGroup.push({

    title: 'Click Me',

    link: {

    state: {

    offset: newoffset

    }

    }

    });

    / OR /

    groupsmembers.anchorGroup.push({

    title: 'Install',

    link: {

    fullState: {

    componentId: '..',

    states: [{

    path: 'article'

    }, {

    address: outcome.data[i].address

    }]

    }

    }

    });

    / OR /

    groupsmembers.anchorGroup.push({

    title: 'Install',

    link: {

    fullState: {

    componentId: '/',

    states: [{

    workspace: 'automation-enterprise',

    app: 'device-extension'

    }, {

    path: 'info' // apps/pulse/5/viewer

    }, {

    id: outcome.data[i].sortedcollectionmemberitemid, // apps/pulse/5/individual

    tab: 'markdown'

    }]

    }

    }

    });

    groupsoptions.anchorGroup = {

    valueMapping: 'ignore'

    }

    title

    Button Elements

    • Similar to Anchors, except that right click wont be available.

    Canvas Collections

    • for complex (object arrays) collections, you would use the izy-value tag with the name of the property

    href="hrefUri"

    izy-onclick="href"

    class="anchor$izyid anchor$izyinputvalue$izyid">

    title

    • for simple collections (single number, string, etc.) do not use $value with . instead mark the element where the value needs to go and then set the value as a parameter:

    * this will get rid of the awkward property names on the initial create component

    Highlight, Show/Hide multiple elements within a collection

    • use a "complex" canvas collection (see above)
    • use either a "onetoone" valuemapping or "fs"
    • target the class element with $izyinputvalue$izyid tag.

    groupsparameters.tabs = ['black', 'blue'];

    groupsmembers.contextMenuButton = [{ text: 'a' }, { text: 'b' }];

    groupsoptions.contextMenuButton = {

    valueMapping: 'onetoone'

    };

    groupsparameters.tabs = [1];

    groupsmembers.contextMenuButton = [{ text: 'a', id: 1 }, { text: 'b', id: '2' }];

    groupsoptions.contextMenuButton = {

    valueMapping: 'pickbyindex'

    };

    Hide/Show feature launch buttons (e.g. add and context menus)

    • Use the Highligh, Show/Hide with a single member. Either value mapping (onetoone) or (fs) works, but onetoone is recommended because it will:

    * generate more readable styles (contextMenuButtonVisible, contextMenuButtonHidden) vs (contextMenuButton1, contextMenuButton0)

    * no index property needs to be defined for collection objects

    .contextmenuButton$izyid {

    display: none;

    }

    .contextmenuButtonEnabled$izyid {

    display: block;

    }

    groupsmembers.contextMenuButton = [{}];

    groupsoptions.contextMenuButton = {

    valueMapping: 'onetoone'

    }

    if (features.contextMenuButton) groupsparameters.contextMenuButton = ['Enabled'];

    General V5 solutions and improvements

    • cbs can be eliminated from the thing and use ['chain.outcome'].
    • optional modtask parameter can be dropped
    • action: can be consolidated into ?
    • modtask.outcome should become chain.get('outcome')
    • eliminate ?validate
    • use the map version of htmlcomponent.updateSelector (more readable)
    • queryGroups is circus friendly
    * might return 301/404 with the link in the viewLinks for invalid paths, etc.

    * use the "circus" objects groupsmembers, groupsoptions, groupsparameters, ...

    • use componentPath to describe and link to component as opposed to modname, etc.
    • unified model for getting/setting userinput to html tags
    • replace region based updates with group based updates:

    would become

    ['htmlcomponent.updateRegion', [{

    regionid: 'contextmenu',

    modname: modtask.outcome.modname

    }]]

    would become

    ['htmlcomponent.updateGroupsMembers', data.groupsmembers, data.groupsoptions],

    ['htmlcomponent.setGroupsParameters', data.groupsparameters]