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.

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]