Posts

Tasks List with PNP JS & DataTable in SharePoint

Image
Hi , I have created one example for SharePoint with pnp-js & datatable.  Features which I have covered in this example : Open task display page in new tab. Show Priorities in different colors. Show Percent Completed as Progress Bar Show dates in proper formats. Show Assigned To (Multi-people) Here is the code : You need to add following references : <script src="https://code.jquery.com/jquery-2.2.0.min.js" integrity="sha256-ihAoc6M/JPfrIiIeayPE9xjin4UWjsx2mjW/rtmxLM4=" crossorigin="anonymous"></script> <!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrap

Organization Chart with AngularJS

Image
What is Organization Chart? An Organizational Chart shows the internal structure of an organization or company. The employees and positions are represented by boxes or other shapes, sometimes including photos, contact information, email and page links, icons and illustrations. Straight or elbowed lines link the levels together.   This creates a clear visual depiction of the hierarchy and ranks of different people, jobs and departments that make up the organization. Organizational Charts also are known as Organization Charts, Org Charts, Organograms, Organogram Charts (sometimes spelled Organigrams or Organigrammes) and Hierarchy Charts. Don’t be fooled: Despite all the different names, they’re all the same thing. How to create with angularjs & google chart? First you need to create one JS file: OrgChart.JS & copy below text : var app = angular.module( 'OrgChartApp' , []); app.controller( 'OrgChartController' , [ '$scope' , &