Working with Repository > Components > MetabaseObjectsIconView > Example of Creating the MetabaseObjectsIconView Component
To execute the example. in the HEAD tag of the HTML page add links to the following JS and CSS files:
PP.js
PP.Metabase.js
Resources file (such as resources.en).
PP.css.
In the SCRIPT tag add the following script:
// Function that is executed on page load function onLoad() { mb = new PP.Mb.Metabase({ Id: "PPREPOSITORY", UserCreds: new PP.Mb.UserCreds({ UserName: "user", Password: "password" }) }); //Open repository mb.open() // Create list1 = new PP.Mb.Ui.MetabaseObjectsIconView({ // Root folder key RootKey: 67,
// Repository, from where data is taken Metabase: mb, ParentNode: document.getElementById("mtl"), // Object height ItemHeight: 40, // Object width ItemWidth: 100, // Object list display option - large icons IconType: PP.Mb.Ui.NavigatorBox.ObjectListMode.Giant, // Object orientation type - horizontal orientation Orientation: "Horizontal" }); };
In the BODY tag add the onload attribute and the div element with the mtl identifier:
<body onload="onLoad();">
<div id = "mtl"></div>
</body>
After executing the example the HTML page will contain the MetabaseObjectsIconView component that looks as follows:
See also:
