/mcpMinimal view—Displays minimum information which is default option. This displays only 10 fields out of 50 which are the most critical information about the customer such as, customer id, first name, last name, and email address. Enlarged view—Displays maximum information which displays all the 50 fields related to the customer information. A simple button can be used to toggle these views. The minimal view takes less space. Hence a gadget with lesser height would suffice. The enlarged view takes more space to fit in the content in a user-friendly manner (no or minimal scrollbars). Example of Toggle View var view = 'minimal'; // view is minimal by default function toggleView() { if (view === 'minimal') { view = 'enlarged'; // add more fields to the DOM here and do something else which is also required. // Once you have the DOM updated with the content use the adjustHeight API to adjust the height of the iFrame in px according your need gadgets.window.adjustHeight(500); } else { // here we are going back to minimal view view = 'minimal'; // remove the extra fields from here and do something else which is also required. // Once you have the DOM updated with the content use the adjustHeight API to adjust the height of the iFrame in px according your need gadgets.window.adjustHeight(100); } } In the above example, the dynamic nature of the view is limited to two fixed sizes, one is the minimal view which can always fit in an iFrame of height 100 pixels and the other is the enlarged view with more details which can fit in an iFrame of height 500 pixels. Calling the gadgets.window.adjustHeight() without Parameter Consider a gadget with a grid which displays the real-time data of the signed-in users in a team to a Supervisor. This grid would dynamically update whenever a user of that team signs-in or signs-out. The size of the grid can vary from one row to n number of rows. To calculate the height of the gadget with respect to the changing number of rows in the grid you must call the gadgets.window.adjustHeight(opt_height) API without any parameter. Whenever gadgets.window.adjustHeight(opt_height) API is called without the height parameter, it calculates the height of the content inside the iFrame and applies that height to the iFrame. It is recommended that the gadget calls this API in the gadget code, which can manipulate the DOM to change the size of the content inside it. Example of Adjust Height without Parameter team.getUsers({ onLoad: function(users) { // load the grid first time for (user in users.getCollection()) { if (user.getState() === 'LOGGED_IN') { // render each row of logged in users } } // calling the adjustHeight API will automatically calculate the height of the content and apply it to the iFrame gadgets.window.adjustHeight(); Cisco Finesse Web Services Developer and JavaScript Guide, Release 12.5(1) 406 Finesse Desktop Gadget Development Setting Gadget Height—Using Gadget API