['htmlcomponent.create', { ... }]
onnavigate['frame_getkey', ['kvsValidated']],
['htmlcomponent.getComponentParameters'],function(chain) {
chain([[modtask.apiExecutionContext + 'rel:api?queryGroups', {
/ mandatory circus properties /kvsValidated: modtask.kvsValidated,
// componentParametersparameters: chain.get('outcome').data
/ end of mandatory circus properties /}]
]);},
['htmlcomponentdefault.handlenon200']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]
]);chain(['frame_notify', {
success: true,action: 'showAreaAction',
actionComponents: [{componentPath: modtask.ldmod('kernel/path').rel('../edit'),
obj: chain.get('outcome').data.obj}]
}]);['frame_getnode', modtask],
function(chain) {chain(['chain.importProcessor', 'sql/jsonnode:chain', {
dbConnection: modtask.node}]);
},['sql.select', { .. }]
['chain.importProcessor', 'apps/accountmanager/5/sessionfeature:chainprocessor'],
['features=session.pkgflags']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}
}]);circus.addUriProperties
* creation of groupsmembers.metaItems
* object selection in UI and context mapping across context menus
*circus.addUriProperties
circus.addUriProperties
* 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['htmlcomponent.getGroupsParameters']
['htmlcomponent.setGroupsParameters']
['htmlcomponent.getComponentParameters']
['htmlcomponent.setComponentParameters'
* 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 aembedder$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.
* responsiveness
* errorhandling* sometimes groups data need to be applied to CSS (i.e. background image uris for login page). You can use htmlcomponent.updateSelector
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.var itemType = modtask.ldmod('izyware/acl/sql').tableNameToItemType['appstore'];
itemType: 'NOQUOTE' + itemType,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'
}
href="hrefUri"
izy-onclick="href"
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'};
* 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'];
* use the "circus" objects groupsmembers, groupsoptions, groupsparameters, ...
would become
['htmlcomponent.updateRegion', [{
regionid: 'contextmenu',modname: modtask.outcome.modname
}]] would become['htmlcomponent.updateGroupsMembers', data.groupsmembers, data.groupsoptions],
['htmlcomponent.setGroupsParameters', data.groupsparameters]