How to create Grantt Chart on Dynamics 365

Using Project Operations you can create an automated Gantt Charts, and I will be showing you how to do it.

Project Operations has a simplified, drag and drop project scheduling tool. It includes dashboards, task management, scheduling, interactive Gantt charts, and work-breakdown structures.

Steps to create a Gantt Chart

First you have to open Project Operations in Dynamics 365 and click Projects in the left side bar

Click New Project and this window will appear

Fill up the fields with the correct informations and then click the Tasks tab

Write the tasks, assign them and give every task a duration of time and your Grantt chart will be created automatically in the Timeline tab based on what information you’ve provided.

You can drag the rectangle to adjust the task duration.

Problems you might face

Sometimes when you click on the Tasks tab it won’t load your tasks

All you have to do is click on open site in New Window and sign in again to your account, you will be redirected to Dynamics 365 Project

When this page appears click on Go to Project Home and then click on the name of your project where you want to create the Grantt Chart.

Your project will open and the Tasks tab will work properly.

How To Create Ganntchart in project opearations D365

Ganntchart is a project management tool that illustrates a project plan. It has two main sections: the left side outlines a list of tasks, while the right side has a timeline of work. Inorder to create ganntchart in project-operations, first we need to have a project to manage. Below is simple steps used to follow to create ganntchart.

1) create project:

go to the projects tab in the project operations environment, create new project and fill some essential general fields. For example:

project-nameweb-project
DescriptionDevelop website for ABC University
CustomerABC University
Project Manager John Doe
project-details

2) add tasks to the project:

Given a project is created, now add tasks related to your project. Our example web project has many tasks and subtasks. Below is a table showing the tasks and associated subtaks.

Task Subtask
Analysis identify use cases
create user stories
conduct techincal and finacial feasiblity
Design create low fidelity prototype
create high high fidelity prototype
Development develop sprint-1
develop sprint-2
Test conduct test-sprint-1
conduct test-sprint-2
conduct UAT test
Deliver deploy to azure
tasks, subtasks breakdown

3) create a team for the project

Once tasks are completed, go to team tab and add team-members needed to compelte your project. In our demo example we have the following team-members working on the sample web-project.

Profession Employee-name
Business analyst Abel Alemu
Software Designer Markos Alemu, Thomas
Software Developer George, Yonas Alemu
Software Tester Sara Alemu, Helen Alemu
team-mebers list

4) Assign task to each employee/team-member

Once tasks are created and team-members are populated, now it’s time to assign task to each team-member. Below is a screenshot from our demo example of web-project.

allocating task to team-member

5) Manage dependency using the timeline

Given one task is dependent on another task, this stage is crucial for effective project managment below is a screenshot from our example. It shows once test-sprint-1 is dependent on sprint-1-development. And test-sprint-2 is dependent on sprint-2-development. And UAT (User Acceptance Testing) is dependent on both test-sprint-2.

These are the simple steps to follow to create the gannt-chart. gannt chart has the following advatages when it comes to project managment:

  1. it helps to determines resources and task dependencies
  2. it monitors the progress of the project

Using Power Automate

Power Automate, is an useful online tool for creating automated workflows between apps and services to synchronize files, get notifications, and collect data within the Microsoft 365 application.

An automation can be quickly and easily created, only a basic understanding of Office 365 is required to a create basic automation

Power Automate Home page

Visit the Power Automate Website https://unitedkingdom.flow.microsoft.com/en-us/ and sign in with an Microsoft account. After that is done the Power Automate Home page will be displayed.

Templates page

A new workflow can be created from scratch if a specific workflow needs to be made or a existing template can be taken from the Templates page making the creating workflow process easier.

Save Gmail attachments to your Google Drive workflow template

This template will be used for demonstration. Any files attached to a email going to this Gmail account will be automatically saved to a Google Drive account. The user adds the email addresses of the Gmail and Google Drive accounts that the workflow will connect to for the automation to work.

.Workflow details

When the flow is created the details of the workflow will be displayed showing information such as the title, description, who created the workflow, when the workflow is created and etc. A history of the workflow’s run are displayed at the bottom providing the results of each run showing whether they were successful or not.

My Flows page

All workflows that the user has created is shown on the My Flows page.

How to use Cypress?

Cypress is an end-to-end testing framework for web test automation. It enables us to write automated web tests in JavaScript.

Cypress is universal because it’s written in JavaScript and uses Node.js when running in browsers. It’s simple to set up and its fast when it comes to debugging, and if the tests fail, you will be provided with suggestions for how to fix the defect.

Write your first test

open up the IDE and add the code below

describe(‘My First Test’, () => { it(‘Does not do much!’, () => { expect(true).to.equal(true) }) })

after you save the file, run it using the following command in your terminal

npx cypress run

the cypress command log will pop up , click on the name of your file and you will see the following

Debugging using .debug( )

Cypress also exposes a shortcut for debugging commands, .debug().

it(‘let me debug like a fiend’, () => { cy.visit(‘/my/page/path’) cy.get(‘.selector-in-question’).debug() })

The current subject that is yielded by the cy.get() is exposed as the variable subject within your Developer Tools so that you can interact with it in the console.

Use .debug() to quickly inspect any (or many!) part(s) of your application during the test. You can attach it to any Cypress chain of commands to have a look at the system’s state at that moment.

What is typescript? and What are its advantages?

Typescript is a superset of JS. It’s a programming languge with additinal syntax. TypeScript builds on top of JavaScript. The following pictcure shows the relationship between the two.

First, you write the TypeScript code. Then, you compile the TypeScript code into plain JavaScript code using a TypeScript compiler(tsc).

TypeScript uses the JavaScript syntaxes and adds additional syntaxes for supporting data types. Note that Javascript is dynamically typed languge meaning if there is any error in the code, it’s caught at runtime and the program doesn’t terminate gracefully. Using typescript helps to identify errors at compile time.

why typescript?

typescript adds data-type feature which helps to identify error at compile time. Thus, it forces us to write robust, clean and less error-prone code. For example. let’s say we want to write a function that adds two numbers, num1 and num2. If we write this function in javascript and without any additional validation, we will get unwanted result(string concatination rather than addition). Look at the screenshots below for further illustration.

the screenshot below shows simple index.html page with two input filed and button to add the two numbers.

index.html page –> here we include script.js file

the screenshot below shows the script.js file where we define our add function.

script.js file (note this isn’t typescript file, this is plain javascript file)

if we open index.html file and put some numbers in the input field, and press add button. we won’t get the exepected result in the console. Rather we get concatination of string values.

console output

Now by using typescript we can write more robust code and enforce we are getting numbers insted of string values. Thus avoid runtime errors or unexpected results in our case. The screenshot below shows an example of typescript.

script.ts (this is typescript file with additinal syntax shown with yellow underlines)

Now, we can compile this file by using typescript compiler(tsc) and run the command ‘tsc script.ts’. This command will compile our code and produce ‘script.js’ file. Below is the console output after compiling this code.

console output after running typescript

Thus using typescript we can write clean and more robust code.

Additional advantage of using typescript

Apart from writing more robust and less-error prone code, typescript has the following advantages

  1. we can use next generation Javascript features and everyting we write compiles down to js code.
  2. we can use features like interface and generics that helps during development.
  3. It has rich configuration options

Disadvantage of using typescript

Although typescript provides lots of feature, one drawback is that neither broswer nor node can execute typescript file. That is why we have tsc tool (typescript compiler) to compile our code back to plain Javascript so that our browser can interpret it.

How to install it?

Inorder to start using typescript we need to install it using npm. Below is a command to install typescript globally.

npm install -g typescript

Usefull GitHub commands

Build – npm run build

Run – npm start

Check Git – git remote -v

Clone

git remote set-url origin https://github.com/TopOneUK/CRM

git clone https://github.com/TopOne/CRM D:\GoogleDrive\GitHUB\TopOne.CRM

Create – npx create-react-app TestPopUp

Config

git config –global user.email “Mario.Zbikowskil@TopOneCRM.com”

git config –global user.name “TopOneMario”

Node.js

Others

git init
npm cache clean --force
  • npm rebuild
  • npm i react-scripts
  • npm install styled-components
  • npm i request –save