Creating Organization Charts for IBM Connections using JavaScript and Google Charts
|
|
- Arthur Cain
- 5 years ago
- Views:
Transcription
1 Creating Organization Charts for IBM Connections using JavaScript and Google Charts As we all know, IBM Connections has a great report-to-chain widget which shows current user reporting structure. However, sometimes we want to see the whole picture and display the full reporting chart of our organization. And it s quite easy to do since we have all data in IBM Connections. In this document I described how to create nice looking Org Charts based on IBM Connections report-tochain structure and Google Charts JS library. Here is an example of the resulting chart: Using IBM Connections REST API we can get all people managed by specified user as described here: 10.lotus.com/ldd/lcwiki.nsf/xpAPIViewer.xsp?lookupName=IBM+Connections+6.0+API+Documentation# action=opendocument&res_title=searching_for_a_persons_direct_reports_ic60&content=apicontent Requesting an URL /profiles/atom/peoplemanaged.do?key=<userid> You will get an XML data with all people managed by user as XML entries. <userid> is an internal key generated by Connections for each user. You can also use URL /profiles/atom/peoplemanaged.do? =< > if you want. Then, using jquery DOM methods we can get the information we need from that XML and create our chart. We will need a recursive function to walk through all organization tree and get data for each employee. For chart display I used Google Charts Library which have a ready-to-use component for creating Organization Charts
2 So, we will do it in two steps: 1. Create simple HTML/JS code which can be inserted in ICEC HTML widget on any page. 2. Create custom widget with editable configuration settings. In this document we will work with on-premise version of IBM Connections. There are some differences with IBM Connections Cloud: in URLs of profiles and API calls. However, you can find all the codes for both versions of ICEC widget for Cloud and On-premise as well in zip archive. Let s start! Creating recursive function for retrieving data According to Google Org Chart documentation we need to compose google DataTable object to hold chart data. So we create the object with 2 columns and then add rows with data. // create google data object var data = new google.visualization.datatable(); data.addcolumn('string', 'Name'); data.addcolumn('string', 'Manager'); // add row data.addrow([{v:<userid>,f:<what to display in user box>,<managerid>]); As <userid> we will use IBM Connections user key. You can see user key in the profile link which looks like this In <what to display in user box> section we want to construct nice-looking HTML code with user picture, Name, Title and link to profile. So that s how our table row will look in the code: // add user entry to chart data data.addrow([{v:userkey,f:'<img src="/profiles/photo.do?key='+userkey+'" width="40" height="40"><b><a href="/profiles/html/profileview.do?key='+userkey+'" target="_blank">'+username + '</a></b><br>'+ usertitle, managerid]);
3 Now we are ready to make a recursive function to get data from connections and put it in chart table. * recursively get data for chart with AJAX calls to Connections API data {google.visualization.datatable hierarchy data id {String parent user ID name {String parent user name function getchartdata(data, id, name) { $.ajax({ type: "GET", async:false, datatype: "xml", url: "/profiles/atom/peoplemanaged.do?key="+id, success: function(xml){ $(xml).find("entry").each(function(){ // get current user data from xml userkey = $(this).find('div.x-profile-key').text(); username = $(this).find('name').text(); usertitle = $(this).find('div.title').text(); // add user entry to chart data data.addrow([{v:userkey,f:'\ <img src="/profiles/photo.do?key='+userkey+'" width="40" height="40"><b>\ <a href="/profiles/html/profileview.do?key='+userkey+'" target="_blank">\ '+username + '</a></b><br>'+ usertitle,id]); // get data for people managed by current user getchartdata(data, userkey, username); ); ); We used AJAX calls to IBM Connections API, got user data from XML and then added it to google table row. We used async:false calls to traverse all tree consequentially.
4 Creating main function According to Google documentation example we ll wrap the call of our function in another function drawchart: * Main function to call for Chart Draw function drawchart() { // create google data object var data = new google.visualization.datatable(); data.addcolumn('string', 'Name'); data.addcolumn('string', 'Manager'); // add top row data.addrow([{v:topuserid,f:'\ <img src="/profiles/photo.do?key='+topuserid+'" width="40" height="40"><b>\ <a href="/profiles/html/profileview.do?key='+topuserid+'" target="_blank">\ '+topusername+'</a></b><br>'+topusertitle,'']); // create google chart object with chart div var chart = new google.visualization.orgchart(document.getelementbyid('chart_div')); // Start recursive data retrieval getchartdata(data, topuserid, topusername); // Draw the chart, setting the allowhtml option to true for the pictures. chart.draw(data, {allowhtml:true, allowcollapse:true); You can add more options in chart.draw method to use your own colors etc. Now we need only to set root user ID (topuserid variable) and create final HTML for our code. And, of course, we need to include google chart library. <script type="text/javascript" src="// <div id="chart_div">retrieving data...</div> <script type="text/javascript"> // Connections ID for root user. // Get it from user profile URL /profiles/html/profileview.do?key=<id> var topuserid = 'cecfe ca-b0b7-df93da53db47'; // well Im lazy so I just set boss name and title right here. // But you can try to get it via Connections API by ID var topusername = 'Dennis Michaels'; var topusertitle = 'CEO'; * recursively get data for chart with AJAX calls to Connections API data {google.visualization.datatable hierarchy data id {String parent user ID name {String parent user name function getchartdata(data, id, name) {
5 $.ajax({ type: "GET", async:false, datatype: "xml", url: "/profiles/atom/peoplemanaged.do?key="+id, success: function(xml){ $(xml).find("entry").each(function(){ // get current user data from xml userkey = $(this).find('div.x-profile-key').text(); username = $(this).find('name').text(); usertitle = $(this).find('div.title').text(); // add user entry to chart data data.addrow([{v:userkey,f:'\ <img src="/profiles/photo.do?key='+userkey+'" width="40" height="40"><b>\ <a href="/profiles/html/profileview.do?key='+userkey+'" target="_blank">\ '+username + '</a></b><br>'+ usertitle,id]); // get data for people managed by current user getchartdata(data, userkey, username); ); ); * Main function to call for Chart Draw function drawchart() { // create google data object var data = new google.visualization.datatable(); data.addcolumn('string', 'Name'); data.addcolumn('string', 'Manager'); // add top row data.addrow([{v:topuserid,f:'\ <img src="/profiles/photo.do?key='+topuserid+'" width="40" height="40"><b>\ <a href="/profiles/html/profileview.do?key='+topuserid+'" target="_blank">\ '+topusername+'</a></b><br>'+topusertitle,'']); // create google chart object with chart div var chart = new google.visualization.orgchart(document.getelementbyid('chart_div')); // Start recursive data retrieval getchartdata(data, topuserid, topusername); // Draw the chart, setting the allowhtml option to true for the pictures. chart.draw(data, {allowhtml:true, allowcollapse:true); * Theres a problem with loading google library when using the code * inside ICEC HTML widget even using $(document).ready * so this small workaround just to be sure that google chart library is fully loaded. function LoadGoogle() { if(typeof google!= 'undefined')
6 { google.charts.load('current', {packages:["orgchart"]); google.charts.setonloadcallback(drawchart); else { // Retry later... settimeout(loadgoogle, 30); LoadGoogle(); </script> The code is ready and we are to insert it in ICEC HTML widget. You can also use this code in classic IBM Connections iwidget or Portlet or any other application. But don t forget to manually set your own top user ID.
7
8 And here s the result!
9 Creating custom ICEC widget Now let s transform our code into custom ICEC widget. Use ICEC documentation and tutorial to better understand ICEC widget API: To make custom widget we will split our code into 2 parts: 1. org_chart_onpremise.html HTML code with div container. Actually, we can put chart content directly into widget container but having our own HTML will give us more control. 2. org_chart_onpremise.js JS code We also need to add some code to custom.js ICEC built-in file to define our custom widget. org_chart_onpremise.html <div id="chart_div">retrieving data...</div> org_chart_onpremise.js (function ($, W) { // get or create and expose the XCC Object var X = (function () {W.XCC = W.XCC {; return W.XCC; ()); // Connections ID for root user. // Get it from user profile URL /profiles/html/profileview.do?key=<id> var topuserid = ''; // well Im lazy so I just set boss name and title right here. // But you can try to get it via Connections API by ID var topusername = ''; var topusertitle = ''; var targetdiv = null; var p = W.XCC.P.getProfile(); * recursively get data for chart with AJAX calls to Connections API data {google.visualization.datatable hierarchy data id {String parent user ID name {String parent user name function getchartdata(data, id, name) { $.ajax({ type: "GET", async:false, datatype: "xml", url: "/profiles/atom/peoplemanaged.do?key="+id, success: function(xml){
10 $(xml).find("entry").each(function(){ // get current user data from xml userkey = $(this).find('div.x-profile-key').text(); username = $(this).find('name').text(); usertitle = $(this).find('div.title').text(); console.log(username); // add user entry to chart data data.addrow([{v:userkey,f:'\ <img src="/profiles/photo.do?key='+userkey+'" width="40" height="40"><b>\ <a href="/profiles/html/profileview.do?key='+userkey+'" target="_blank">\ '+username + '</a></b><br>'+ usertitle,id]); // get data for people managed by current user getchartdata(data, userkey, username); ); ); * Main function to call for Chart Draw function drawchart() { // create google data object var data = new google.visualization.datatable(); data.addcolumn('string', 'Name'); data.addcolumn('string', 'Manager'); // add top row data.addrow([{v:topuserid,f:'\ <img src="/profiles/photo.do?key='+topuserid+'" width="40" height="40"><b>\ <a href="/profiles/html/profileview.do?key='+topuserid+'" target="_blank">\ '+topusername+'</a></b><br>'+topusertitle,'']); // create google chart object with chart div var chart = new google.visualization.orgchart(targetdiv.find("#chart_div")[0]); // Start recursive data retrieval getchartdata(data, topuserid, topusername); // Draw the chart, setting the allowhtml option to true for the pictures. chart.draw(data, {allowhtml:true, allowcollapse:true); * Callback function for ICEC widget container$ {Jquery-Object the HTML-container in the Widget.. widgetdata {Object The widget data object with widget settings function LoadChart(container$, widgetdata) { targetdiv = container$; topuserid = X.T.getCustomPropertyValue("OrgChartWidgetTopID", widgetdata); topusername = X.T.getCustomPropertyValue("OrgChartWidgetTopName", widgetdata); topusertitle = X.T.getCustomPropertyValue("OrgChartWidgetTopTitle", widgetdata);
11 if(!topuserid) { topuserid = p.getprofilekey(); topusername = p.getname(); topusertitle = p.gettitle(); google.charts.load('current', {packages:["orgchart"]); google.charts.setonloadcallback(drawchart); // define this function in dependency of nothing X.define([], function () { return LoadChart; ); // END X.define // END X.define (XCC.jQuery jquery, window)); We upload our files in ICEC Customization Files.
12 Now we need to define our custom widget for ICEC in custom.js file. Open it in editor
13 and add the following code inside init() function. ********* START: INSERT THIS SECTION INTO CUSTOM.JS init() FUNCTION ********* * ORG CHART widget function. Includes HTML code, google charts JS library * and widget JS code. {[Jquery-Object] container$ [the HTML-container in the Widget.. ] {[Object] widgetdata [The widget data] * function orgchartwidget(container$, widgetdata) { $.get("/xcc/rest/files/custom/org_chart_onpremise.html",function(data) { container$.html(data); ); widgetdata.contenttype = widgetdata.contenttype.trim(); // require google charts JS, widget JS code, and call LoadChart XCC.require(["profiles"], function () { XCC.require(["// function () { XCC.require(["/xcc/rest/public/custom/org_chart_onpremise.js"], function(loadchart) { LoadChart(container$, widgetdata); ); ); ); * ORG CHART edit settings: widget title, and custom properties: * topid, topname, toptitle container$ {jquery the parent node that will hold the editor widgetdata {Object the widget object to work on * a HTML-String, Jquery-Object or an array of Jquery-Objects! * function orgcharteditor(container$, widgetdata) { return [XCC.U.createTextInputOnTheFly("Widget Title", widgetdata.title, "title"),
14 XCC.U.createTextInputOnTheFly("Top user ID", XCC.T.getCustomPropertyValue("OrgChartWidgetTopID", widgetdata), "orgchartwidgettopid"), XCC.U.createTextInputOnTheFly("Top user Name", XCC.T.getCustomPropertyValue("OrgChartWidgetTopName", widgetdata), "orgchartwidgettopname"), XCC.U.createTextInputOnTheFly("Top user Title", XCC.T.getCustomPropertyValue("OrgChartWidgetTopTitle", widgetdata), "orgchartwidgettoptitle") ]; * ORG CHART save settings to custom properties. {[type] container$ [the Editor as a Jquery-Object] {[type] widgetdata [the widget data] function orgchartsave(container$, widgetdata) { widgetdata.title = container$.find("input[name=title]").val(); XCC.T.setXccPropertyString(widgetData,"OrgChartWidgetTopID", container$.find("input[name=orgchartwidgettopid]").val()); XCC.T.setXccPropertyString(widgetData,"OrgChartWidgetTopName", container$.find("input[name=orgchartwidgettopname]").val()); XCC.T.setXccPropertyString(widgetData,"OrgChartWidgetTopTitle", container$.find("input[name=orgchartwidgettoptitle]").val()); * ORG CHART register a Custom Widget name {String Name of the Custom Widget, icon {String name of the icon. Without the "fa-" at the beginning. createcustomwidget {function Function which should be called when rendering CreateCustomEditor {function optional: Use an own Editor instance! synchuitowidgetdataobject {function optional: Synch your Data * from the UI into the Widget. dontshowin {String optional XCC.W.registerCustomWidget("Org Chart","flag",orgChartWidget,orgChartEditor, orgchartsave ); ********* END: INSERT THIS SECTION INTO CUSTOM.JS init() FUNCTION ********* Following the example of Custom Widget which already placed in init() we created 3 functions: orgchartwidget which invokes the code of our widget. Here we use require module predefined in ICEC to load our google library instead of <script> tag. orgcharteditor to edit our custom settings. orgchartsave to save settings into XCC custom properties Then we registered our widget with registercustomwidget method. Now let s test how it works!
15
16 First added our widget shows hierarchy down from current user. Let s define the head of our Organization.
17 Codes You can find all the codes used in this document here in archive file: Ivan Mikhalychev IBM Collaboration Solutions Technical professional Special thanks to Stefano Pogliani, IBM Technical Sales Collaboration for useful materials and demo!
Jquery Ajax Json Php Mysql Data Entry Example
Jquery Ajax Json Php Mysql Data Entry Example Then add required assets in head which are jquery library, datatable js library and css By ajax api we can fetch json the data from employee-grid-data.php.
More informationOverview... 4 JavaScript Charting and Metric Insights... 5
JAVASCRIPT CHARTING Table of Contents Overview... 4 and Metric Insights... 5 Chart Types...11 Overview of JavaScript chart types...12 d3...13 Highcharts...16 Highstock...18 Google...19 nvd3...21 Dynamic
More informationJquery Manually Set Checkbox Checked Or Not
Jquery Manually Set Checkbox Checked Or Not Working Second Time jquery code to set checkbox element to checked not working. Apr 09 I forced a loop to show checked state after the second menu item in the
More informationUsing Development Tools to Examine Webpages
Chapter 9 Using Development Tools to Examine Webpages Skills you will learn: For this tutorial, we will use the developer tools in Firefox. However, these are quite similar to the developer tools found
More informationCopyright Descriptor Systems, Course materials may not be reproduced in whole or in part without prior written consent of Joel Barnum
Ajax The notion of asynchronous request processing using the XMLHttpRequest object has been around for several years, but the term "AJAX" was coined by Jesse James Garrett of Adaptive Path. You can read
More informationJquery.ajax Call Returns Status Code Of 200 But Fires Jquery Error
Jquery.ajax Call Returns Status Code Of 200 But Fires Jquery Error The request returns http 200 OK, but the xhr status is 0, error. jquery Ajax Request to get JSON data fires error event to make an ajax
More informationCreating an Online Catalogue Search for CD Collection with AJAX, XML, and PHP Using a Relational Database Server on WAMP/LAMP Server
CIS408 Project 5 SS Chung Creating an Online Catalogue Search for CD Collection with AJAX, XML, and PHP Using a Relational Database Server on WAMP/LAMP Server The catalogue of CD Collection has millions
More informationSparrow Client (Front-end) API
Sparrow Client (Front-end) API Service API Version 3.6.0 (Build 8062) Released May 2017 Revision History Date Revision Comments Author 2017-05-22 1.0 Initial document Ilya Tretyakov 2 Table of Contents
More informationHTML Advanced Portlets. Your Guides: Ben Rimmasch, Rahul Agrawal
HTML Advanced Portlets Your Guides: Ben Rimmasch, Rahul Agrawal Introductions 2 Take 5 Minutes Turn to a Person Near You Introduce Yourself Agenda 3 HTML Portlets Overview HTML Portlet Use Cases Development
More informationUsing the Visualization API with GWT and Other Advanced Topics. Itai Raz May 27, 2009
Using the Visualization API with GWT and Other Advanced Topics Itai Raz May 27, 2009 Agenda Visualization API & GWT More Advanced Topics Latency Security / Privacy Data View Q&A The Google Visualization
More informationWebGL Seminar: O3D. Alexander Lokhman Tampere University of Technology
WebGL Seminar: O3D Alexander Lokhman Tampere University of Technology What is O3D? O3D is an open source JavaScript API for creating rich, interactive 3D applications in the browser Created by Google and
More informationNWTL17 - Get your hands on IBM Connections Engagement Center Lab
NWTL17 - Get your hands on IBM Connections Engagement Center Lab Authors: Christophe Leclercq, Technical Sales IBM Collaboration and Talent Solutions Hamza Zedira, Apprentice IBM Collaboration and Talent
More informationAkumina Digital Workplace
Akumina Digital Workplace Widget Manager Samples Version 1.1 (May 2016) Table of Contents OVERVIEW... 5 Widget Manager... Error! Bookmark not defined. Widget Manager Manage Widgets... Error! Bookmark not
More informationManual Html A Href Javascript Window Open In Same
Manual Html A Href Javascript Window Open In Same 0), var tab1 = window.open(aaa.href, aaa.target), tab1.close(), return false, ) You can only close windows that you opened manually using window.open().
More informationWeb API Lab. The next two deliverables you shall write yourself.
Web API Lab In this lab, you shall produce four deliverables in folder 07_webAPIs. The first two deliverables should be pretty much done for you in the sample code. 1. A server side Web API (named listusersapi.jsp)
More informationUtilising the data attribute. adding client side behaviour in Oracle APEX
Utilising the data attribute adding client side behaviour in Oracle APEX Agenda Introducing the data attribute Introducing jquery Changing Page-items into HTML items Record sorting Deleting records from
More informationElementary! Incorporating BlueMix, Node-RED and Watson in Domino applications
Elementary! Incorporating BlueMix, Node-RED and Watson in Domino applications Our Amazing Sponsors MWLUG 2017 Karl-Henry Martinsson CEO, Demand Better Solutions, LLC In the IT industry for 29 years Full
More informationdjango-baton Documentation
django-baton Documentation Release 1.0.7 abidibo Nov 13, 2017 Contents 1 Features 3 2 Getting started 5 2.1 Installation................................................ 5 2.2 Configuration...............................................
More informationLab 1: Getting Started with IBM Worklight Lab Exercise
Lab 1: Getting Started with IBM Worklight Lab Exercise Table of Contents 1. Getting Started with IBM Worklight... 3 1.1 Start Worklight Studio... 5 1.1.1 Start Worklight Studio... 6 1.2 Create new MyMemories
More informationJavaScript CS 4640 Programming Languages for Web Applications
JavaScript CS 4640 Programming Languages for Web Applications 1 How HTML, CSS, and JS Fit Together {css} javascript() Content layer The HTML gives the page structure and adds semantics Presentation
More informationDeveloping Apps for the BlackBerry PlayBook
Developing Apps for the BlackBerry PlayBook Lab # 2: Getting Started with JavaScript The objective of this lab is to review some of the concepts in JavaScript for creating WebWorks application for the
More informationPyBossa.JS JavaScript library for PyBossa
PyBossa.JS JavaScript library for PyBossa Release 0.1 Citizen Cyberscience Centre and Open Knowledge Foundation Feb 26, 2018 Contents 1 User Guide 3 1.1 Useful Links...............................................
More informationMarketo Forms Integration Guide
The SendSafely Secure Upload Widget can be easily integrated into any Marketo Form. Once integrated, users can secure attach files to any Marketo form. If you are not familiar with how SendSafely works,
More informationUser Interaction: jquery
User Interaction: jquery Assoc. Professor Donald J. Patterson INF 133 Fall 2012 1 jquery A JavaScript Library Cross-browser Free (beer & speech) It supports manipulating HTML elements (DOM) animations
More informationGetting Started with the Aloha Community Template for Salesforce Identity
Getting Started with the Aloha Community Template for Salesforce Identity Salesforce, Winter 18 @salesforcedocs Last updated: November 30, 2017 Copyright 2000 2017 salesforce.com, inc. All rights reserved.
More informationjquery and AJAX
jquery and AJAX http://www.flickr.com/photos/pmarkham/3165964414/ Dynamic HTML (DHTML) Manipulating the web page's structure is essential for creating a highly responsive UI Two main approaches Manipulate
More informationClient Side JavaScript and AJAX
Client Side JavaScript and AJAX Client side javascript is JavaScript that runs in the browsers of people using your site. So far all the JavaScript code we've written runs on our node.js server. This is
More informationEasy Authcache documentation
Easy Authcache documentation Contents Contents... 1 Description... 2 Advantages of module differs it from Authcache:... 2 Disadvantages of module differs it from Authcache:... 2 Installation... 2 Easy
More informationAngularJS Intro Homework
AngularJS Intro Homework Contents 1. Overview... 2 2. Database Requirements... 2 3. Navigation Requirements... 3 4. Styling Requirements... 4 5. Project Organization Specs (for the Routing Part of this
More informationINFO216: Advanced Modelling
INFO216: Advanced Modelling Theme, spring 2017: Modelling and Programming the Web of Data Andreas L. Opdahl Session 6: Visualisation Themes: visualisation data/visualisation types
More informationGoogle Maps Manually Place Marker On Click V3 Remove
Google Maps Manually Place Marker On Click V3 Remove Following is the HTML Markup containing the Google Map implementation. To add markers you will need to click on the map. These markers are added. When
More informationUnifer Documentation. Release V1.0. Matthew S
Unifer Documentation Release V1.0 Matthew S July 28, 2014 Contents 1 Unifer Tutorial - Notes Web App 3 1.1 Setting up................................................. 3 1.2 Getting the Template...........................................
More informationDesign Document V2 ThingLink Startup
Design Document V2 ThingLink Startup Yon Corp Andy Chen Ashton Yon Eric Ouyang Giovanni Tenorio Table of Contents 1. Technology Background.. 2 2. Design Goal...3 3. Architectural Choices and Corresponding
More informationCSCE 120: Learning To Code
CSCE 120: Learning To Code Module 11.0: Consuming Data I Introduction to Ajax This module is designed to familiarize you with web services and web APIs and how to connect to such services and consume and
More informationHere are a few easy steps to create a simple timeline. Open up your favorite text or HTML editor and start creating an HTML file.
1 of 6 02-Sep-2013 1:52 PM Getting Started with Timeline From SIMILE Widgets Contents 1 Getting Started 1.1 Note 1.2 Examples 1.3 Step 1. Link to the API 1.4 Step 2. Create a DIV Element 1.5 Step 3. Call
More informationfor Lukas Renggli ESUG 2009, Brest
for Lukas Renggli ESUG 2009, Brest John Resig, jquery.com Lightweight, fast and concise - Document traversing - Event Handling - AJAX Interaction - Animating High-level, themeable widgets on top of JQuery.
More informationAJAX: From the Client-side with JavaScript, Back to the Server
AJAX: From the Client-side with JavaScript, Back to the Server Asynchronous server calls and related technologies CS 370 SE Practicum, Cengiz Günay (Some slides courtesy of Eugene Agichtein and the Internets)
More informationXPages development practices: developing a common Tree View Cust...
1 of 11 2009-12-11 08:06 XPages development practices: developing a common Tree View Custom Controls Use XPages develop a common style of user control Dojo Level: Intermediate Zhan Yonghua, Software Engineer,
More informationReports and Documents Generator for SharePoint ver.: 2.1
Reports and Documents Generator for SharePoint ver.: 2.1 User Guide Version 2.1 Contents 1. Overview... 3 2. Licensing... 4 3. Installation instructions... 4 3.1. Requirements... 4 3.2. Installation...
More informationTutorials Php Y Jquery Mysql Database Without Refreshing Code
Tutorials Php Y Jquery Mysql Database Without Refreshing Code Code for Pagination using Php and JQuery. This code for pagination in PHP and MySql gets. Tutorial focused on Programming, Jquery, Ajax, PHP,
More informationdjango-baton Documentation
django-baton Documentation Release 1.3.1 abidibo Nov 05, 2018 Contents 1 Features 3 2 Getting started 5 2.1 Installation................................................ 5 2.2 Configuration...............................................
More informationTable of contents. Ajax AutoComplete Manual DMXzone.com
Table of contents Table of contents... 1 About Ajax AutoComplete... 2 Features in Detail... 3 The Basics: Creating a Basic AJAX AutoComplete Field... 12 Advanced: Generating an AutoComplete Field using
More informationIf looking for a ebook XML Programming Success in a Day: Beginner's Guide to Fast, Easy, and Efficient Learning of XML Programming (XML, XML
XML Programming Success In A Day: Beginner's Guide To Fast, Easy, And Efficient Learning Of XML Programming (XML, XML Programming, Programming, XML Guide,... XSL, DTD's, Schemas, HTML5, JavaScript) By
More informationMAX 2006 Beyond Boundaries
Building a Spry Page MAX 2006 Beyond Boundaries Donald Booth Dreamweaver QE/Spry Team Adobe Systems, Inc. 1. Attach CSS/JS 1. Browse to the Assets folder and attach max.css. 2. Attach the 2 js files.
More informationWELCOME TO JQUERY PROGRAMMING LANGUAGE ONLINE TUTORIAL
WELCOME TO JQUERY PROGRAMMING LANGUAGE ONLINE TUTORIAL 1 The above website template represents the HTML/CSS previous studio project we have been working on. Today s lesson will focus on JQUERY programming
More informationjquery UI Widget Factory
jquery UI Widget Factory Scott González jquery UI development lead http://nemikor.com @scott_gonzalez $(λ); The widget factory - What is it? - Why do we need it? - How do we use it? $.widget(); Why we
More information(Simple) JavaScript Framework Homework
(Simple) JavaScript Framework Homework Overview: In this homework you will implement a picture gallery using object oriented JavaScript code in an external JavaScript file. This is a lab about learning
More informationHuman-Computer Interaction Design
Human-Computer Interaction Design COGS120/CSE170 - Intro. HCI Instructor: Philip Guo Lab 6 - Connecting frontend and backend without page reloads (2016-11-03) by Michael Bernstein, Scott Klemmer, and Philip
More informationJavaScript: the language of browser interactions. Claudia Hauff TI1506: Web and Database Technology
JavaScript: the language of browser interactions Claudia Hauff TI1506: Web and Database Technology ti1506-ewi@tudelft.nl Densest Web lecture of this course. Coding takes time. Be friendly with Codecademy
More informationJavaScript CS 4640 Programming Languages for Web Applications
JavaScript CS 4640 Programming Languages for Web Applications 1 How HTML, CSS, and JS Fit Together {css} javascript() Content layer The HTML gives the page structure and adds semantics Presentation
More informationWeb applications Developing Android/Iphone Applications using WebGUI
Web applications Developing Android/Iphone Applications using WebGUI Joeri de Bruin Oqapi Software joeri@oqapi.nl 1 Overview Web applications Create WebApp with WebGUI Turn WebApp into native mobile app
More informationWeb Applications. Software Engineering 2017 Alessio Gambi - Saarland University
Web Applications Software Engineering 2017 Alessio Gambi - Saarland University Based on the work of Cesare Pautasso, Christoph Dorn, Andrea Arcuri, and others ReCap Software Architecture A software system
More informationPaul Withers Intec Systems Ltd By Kind Permission of Matt White and Tim Clark
XPages Blast Paul Withers Intec Systems Ltd By Kind Permission of Matt White and Tim Clark Lead Developer at Matt White Creators of IdeaJam and IQJam Creator of XPages101.net Founder member of the LDC
More informationKonaKart Shopping Widgets. 3rd January DS Data Systems (UK) Ltd., 9 Little Meadow Loughton, Milton Keynes Bucks MK5 8EH UK
KonaKart Shopping Widgets 3rd January 2018 DS Data Systems (UK) Ltd., 9 Little Meadow Loughton, Milton Keynes Bucks MK5 8EH UK Introduction KonaKart ( www.konakart.com ) is a Java based ecommerce platform
More informationJavaScript Web Applications: JQuery Developers' Guide To Moving State To The Client By Alex MacCaw READ ONLINE
JavaScript Web Applications: JQuery Developers' Guide To Moving State To The Client By Alex MacCaw READ ONLINE If you are looking for a book by Alex MacCaw JavaScript Web Applications: jquery Developers'
More informationAdding a RSS Feed Custom Widget to your Homepage
Adding a RSS Feed Custom Widget to your Homepage The first, and often hardest, task is to decide which blog or news source you wish to bring into your Avenue course. Once you have selected a blog or news
More informationJQuery WHY DIDN T WE LEARN THIS EARLIER??!
JQuery WHY DIDN T WE LEARN THIS EARLIER??! Next couple of weeks This week: Lecture: Security, jquery, Ajax Next Week: No lab (Easter) I may post a bonus (jquery) lab No quiz (yay!) Maybe a bonus one? Snuneymuxw
More informationCIS 3308 Logon Homework
CIS 3308 Logon Homework Lab Overview In this lab, you shall enhance your web application so that it provides logon and logoff functionality and a profile page that is only available to logged-on users.
More informationPDF Exporter Xpages Custom Control Documentation
PDF Exporter Xpages Custom Control Documentation 2(8) 1 What is this custom control and what it does...3 1.1 PDF template...3 1.2 How to use Open Office Impress...4 2 Technical overview...4 3 Installation
More informationSSJS Server-Side JavaScript WAF Wakanda Ajax Framework
1 28/06/2012 13:45 What You Will Find in those Examples In the Quick Start, you discovered the basic principles of Wakanda programming: you built a typical employees/companies application by creating the
More informationBest Practices Chapter 5
Best Practices Chapter 5 Chapter 5 CHRIS HOY 12/11/2015 COMW-283 Chapter 5 The DOM and BOM The BOM stand for the Browser Object Model, it s also the client-side of the web hierarchy. It is made up of a
More informationFolderView DMXzone.com Folder View 2 Manual
Folder View 2 Manual Copyright 2009 All Rights Reserved To get more go to Page 1 of 39 Index Folder View 2 Manual... 1 Index... 2 About FolderView... 3 Features in Detail... 4 Before you begin... 10 Installing
More informationKWizCom Corporation. Data View Plus App. User Guide
KWizCom Corporation Data View Plus App User Guide Copyright 2005-2018 KWizCom Corporation. All rights reserved. Company Headquarters KWizCom 95 Mural Street, Suite 600 Richmond Hill, ON L4B 3G2 Canada
More informationAD406: What s New in Digital Experience Development with IBM Web Experience Factory
AD406: What s New in Digital Experience Development with IBM Web Experience Factory Jonathan Booth, Senior Architect, Digital Experience Tooling, IBM Adam Ginsburg, Product Manager, Digital Experience
More informationOverview
HTML4 & HTML5 Overview Basic Tags Elements Attributes Formatting Phrase Tags Meta Tags Comments Examples / Demos : Text Examples Headings Examples Links Examples Images Examples Lists Examples Tables Examples
More informationAJAX Programming Chris Seddon
AJAX Programming Chris Seddon seddon-software@keme.co.uk 2000-12 CRS Enterprises Ltd 1 2000-12 CRS Enterprises Ltd 2 What is Ajax? "Asynchronous JavaScript and XML" Originally described in 2005 by Jesse
More informationMultimedia im Netz Online Multimedia Winter semester 2015/16
Multimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 06 Minor Subject Ludwig-Maximilians-Universität München Online Multimedia WS 2015/16 - Tutorial 06 (NF) - 1 Today s Agenda Flashback
More informationDATABASE SYSTEMS. Introduction to web programming. Database Systems Course, 2016
DATABASE SYSTEMS Introduction to web programming Database Systems Course, 2016 AGENDA FOR TODAY Client side programming HTML CSS Javascript Server side programming: PHP Installing a local web-server Basic
More informationDeep Dive into Apps for Office with Word
Deep Dive into Apps for Office with Word Office 365 Hands-on lab In this lab you will get hands-on experience developing an App for Office which targets Microsoft Word. This document is provided for informational
More informationContents. Demos folder: Demos\14-Ajax. 1. Overview of Ajax. 2. Using Ajax directly. 3. jquery and Ajax. 4. Consuming RESTful services
Ajax Contents 1. Overview of Ajax 2. Using Ajax directly 3. jquery and Ajax 4. Consuming RESTful services Demos folder: Demos\14-Ajax 2 1. Overview of Ajax What is Ajax? Traditional Web applications Ajax
More informationWebsite Development Lecture 18: Working with JQuery ================================================================================== JQuery
JQuery What You Will Learn in This Lecture: What jquery is? How to use jquery to enhance your pages, including adding rich? Visual effects and animations. JavaScript is the de facto language for client-side
More informationWidget ID Each user type widget should have a unique identifier within a single controller (ID). Any string can be as ID.
Widget ID Each user type widget should have a unique identifier within a single controller (ID). Any string can be as ID. Widget ID is used when installing the widget, appears in its program code and cannot
More informationJavaScript, jquery & AJAX
JavaScript, jquery & AJAX What is JavaScript? An interpreted programming language with object oriented capabilities. Not Java! Originally called LiveScript, changed to JavaScript as a marketing ploy by
More informationCIW 1D CIW JavaScript Specialist.
CIW 1D0-635 CIW JavaScript Specialist http://killexams.com/exam-detail/1d0-635 Answer: A QUESTION: 51 Jane has created a file with commonly used JavaScript functions and saved it as "allfunctions.js" in
More informationBuilding Collaborative Apps with Wookie
Building Collaborative Apps with Wookie Collaborative Apps Use W3C Widgets packaging and widget object API with the Google Wave Gadgets API Runs in Wookie, no Wave server needed Requires plugins that can
More informationJavaScript Fundamentals_
JavaScript Fundamentals_ HackerYou Course Syllabus CLASS 1 Intro to JavaScript Welcome to JavaScript Fundamentals! Today we ll go over what programming languages are, JavaScript syntax, variables, and
More informationPackage shiny.semantic
Type Package Title Semantic UI Support for Shiny Version 0.1.1 Package shiny.semantic May 29, 2017 Creating a great user interface for your Shiny apps can be a hassle, especially if you want to work purely
More informationHTML5. clicktag implementation
HTML5 clicktag implementation Date: 18 02-2016 Version: 2.0 Summary Introduction... 3 Google Web Designer... 4 Adobe Edge... 5 Swiffy... 7.swf file with clicktag... 8 Case 1: clicktag explicit... 8 Case
More informationConfiguring Anonymous Access to Analysis Files in TIBCO Spotfire 7.5
Configuring Anonymous Access to Analysis Files in TIBCO Spotfire 7.5 Introduction Use Cases for Anonymous Authentication Anonymous Authentication in TIBCO Spotfire 7.5 Enabling Anonymous Authentication
More informationWeb Development. With PHP. Web Development With PHP
Web Development With PHP Web Development With PHP We deliver all our courses as Corporate Training as well if you are a group interested in the course, this option may be more advantageous for you. 8983002500/8149046285
More informationProgramming with the Finesse API
Programming with the Finesse API OpenSocial Gadgets Source: http://www.slideshare.net/wuzziwug/opensocial-intro-presentation OpenSocial Gadgets A gadget spec: Is an XML file Defines metadata about an OpenSocial
More informationIBM. BPM Blueprint; IBM WebSphere Lombardi Edition V7.1, Application Development
IBM 000-173 BPM Blueprint; IBM WebSphere Lombardi Edition V7.1, Application Development Download Full Version : http://killexams.com/pass4sure/exam-detail/000-173 QUESTION : 61 What is the purpose of the
More informationKWizCom Corporation. List Aggregator App. User Guide
KWizCom Corporation List Aggregator App User Guide Copyright 2005-2017 KWizCom Corporation. All rights reserved. Company Headquarters KWizCom 95 Mural Street, Suite 600 Richmond Hill, ON L4B 3G2 Canada
More informationBEST PRACTICES HTML5 SPECIFICATIONS. what's next in data-driven advertising. File Types. HTML5: HTML, JS, CSS, JPG, JPEG, GIF, PNG, and SVG
SPECIFICATIONS HTML5 creatives are a type of display creative that must follow the same guidelines as display creatives with some additional recommendations. The IAB Display Advertising Guidelines (https://www.iab.com/newadportfolio/)
More informationAware IM Version 8.2 Aware IM for Mobile Devices
Aware IM Version 8.2 Copyright 2002-2018 Awaresoft Pty Ltd CONTENTS Introduction... 3 General Approach... 3 Login... 4 Using Visual Perspectives... 4 Startup Perspective... 4 Application Menu... 5 Using
More informationWhen you don t want to lose your site s existing look and feel, you re
Bonus Chapter 2 Hosting Your Site In This Chapter Hosting at home (page) Giving your site a test Using tags on a page When you don t want to lose your site s existing look and feel, you re short on time,
More information«FitPhoto» Integration
«FitPhoto» Integration Version 4.3 EN Date 21/08/2012 Company FittingBox 2010 FittingBox Reserved 1 / 20 Table of contents 1. Basic Setup... 3 2. Loading FitPhoto... 4 2.1. Synchronous integration (Recommended)...
More informationStatic Webpage Development
Dear Student, Based upon your enquiry we are pleased to send you the course curriculum for PHP Given below is the brief description for the course you are looking for: - Static Webpage Development Introduction
More informationXAP: extensible Ajax Platform
XAP: extensible Ajax Platform Hermod Opstvedt Chief Architect DnB NOR ITUD Hermod Opstvedt: XAP: extensible Ajax Platform Slide 1 It s an Ajax jungle out there: XAML Dojo Kabuki Rico Direct Web Remoting
More informationTHE PRAGMATIC INTRO TO REACT. Clayton Anderson thebhwgroup.com WEB AND MOBILE APP DEVELOPMENT AUSTIN, TX
THE PRAGMATIC INTRO TO REACT Clayton Anderson thebhwgroup.com WEB AND MOBILE APP DEVELOPMENT AUSTIN, TX REACT "A JavaScript library for building user interfaces" But first... HOW WE GOT HERE OR: A BRIEF
More informationMultimedia im Netz Online Multimedia Winter semester 2015/16
Multimedia im Netz Online Multimedia Winter semester 2015/16 Tutorial 08 Minor Subject Ludwig-Maximilians-Universität München Online Multimedia WS 2015/16 - Tutorial 08 (NF) - 1 Today s Agenda Evaluation
More informationA demo Wakanda solution (containing a project) is provided with each chapter. To run a demo:
How Do I About these examples In the Quick Start, you discovered the basic principles of Wakanda programming: you built a typical employees/companies application by creating the datastore model with its
More informationTable of contents. Pure ASP Upload 3 Manual DMXzone
Table of contents Table of contents... 1 About Pure ASP Upload 3... 2 Features in Detail... 3 The Basics: Uploading Files with Pure ASP Upload 3... 14 Advanced: Using Pure ASP Upload 3 with Insert Record...
More informationAJAX: Asynchronous Event Handling Sunnie Chung
AJAX: Asynchronous Event Handling Sunnie Chung http://adaptivepath.org/ideas/ajax-new-approach-web-applications/ http://stackoverflow.com/questions/598436/does-an-asynchronous-call-always-create-call-a-new-thread
More informationTheme System. Wisej Themes 1 OVERVIEW
Theme System 1 OVERVIEW Wisej theme system is quite sophisticated and goes beyond simple CSS or SASS. This document is only a short overview to get you started. The full documentation will be ready at
More informationEclipse Scout. Release Notes. Scout Team. Version 7.0
Eclipse Scout Release Notes Scout Team Version 7.0 Table of Contents About This Release.......................................................................... 1 Service Releases..........................................................................
More informationAJAX: Introduction CISC 282 November 27, 2018
AJAX: Introduction CISC 282 November 27, 2018 Synchronous Communication User and server take turns waiting User requests pages while browsing Waits for server to respond Waits for the page to load in the
More information2015 OSIsoft TechCon. Bring element relative features of your PI PB displays to PI Coresight
2015 OSIsoft TechCon Bring element relative features of your PI PB displays to PI Coresight 1 P a g e Table of Contents Contents Table of Contents... 1 Introduction... 2 Setup... 2 Searching in PI Coresight...
More informationProfessional Edition Tutorial: Basic Excel
Professional Edition Tutorial: Basic Excel Pronto, Visualizer, and Dashboards 2.0 Documentation Release 3/29/2017 i Copyright 2015-2017 Birst, Inc. Copyright 2015-2017 Birst, Inc. All rights reserved.
More informationJavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK
Programming for Digital Media EE1707 JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK 1 References and Sources 1. Javascript & JQuery: interactive front-end
More information