Create a Drag & Drop Calendar JavaScript Add-in for Dynamics NAV 2017

MMEDDAHMMEDDAH Member Posts: 5
Create a Drag & Drop Calendar JavaScript Add-in for Dynamics NAV 2017

This walkthrough demonstrates how to create a Drag & Drop Calendar JavaScript control add-in and use it on a Microsoft Dynamics NAV page.
Creating a control add-in assembly file (.dll) with Visual Studio
1. In Visual studio, create a new Project (Class Library)

31i7wigm803x.png

2. Add a Reference to the following assembly: Microsoft.Dynamics.Framework.UI.Extensibility.dll
By Default the path of the assembly is
C:\Program Files (x86)\Microsoft Dynamics NAV\100\RoleTailored Client.

ko3nmeg761pp.png

3. Declare a new Interface named IDragDropCalendar and add the following code.

gw0m5hnpx7h2.png

4. Sign the assembly
a. In Visual Studio, on the project menu, choose DragDropCalendar solution properties
b. Within the windows that appears, select the Signing tab
c. Tick the “Sign the assembly” checkbox.

x6l5n5kci9fl.png

d. In the Choose a strong name key file drop-down list, select New
e. The Create Strong Name Key dialog box will be displayed and you can specify a name for key file.
You can specify a password to protect the file.

n8rhsyytbfel.png

5. Build the solution

oj1yj7h1tltm.png

You can download the file from: https://drive.google.com/open?id=1uBoZRGVhsY7mJmSzKkAvUfqkjWNCpTx9

Creating a JavaScript Scheduler Application
1. Download the following libraries:
- bootstrap.min.js https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js
- fullcalendar.min.js https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js
- jquery-1.11.2.min.js https://code.jquery.com/jquery-1.11.2.min.js
- jquery-ui.min.js https://code.jquery.com/ui/1.11.2/jquery-ui.min.js
- moment.min.js https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js
- jquery.xml2json.min.js https://cdnjs.cloudflare.com/ajax/libs/x2js/1.2.0/xml2json.min.js
- bootstrap.min.css https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
- fullcalendar.min.css https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css
2. Open your favorite IDE (Notepad ++ for example) and create three files
o DragDropCalendar.js https://drive.google.com/open?id=1vqofLGhsu2Q2JmkuWBlKNx5tTJTRlkJj
o DragDropCalendar.css https://drive.google.com/open?id=1o8MNyjDQdGnrK0eQNuaIhrIjrZMq1udi
o Manifest.xml https://drive.google.com/open?id=1o2INN7AHbjN6N4AloRioYf8QIHdIPCes

zwjvab859tpc.png

Creating a Resource .Zip File
Before registering the control add-in in Microsoft Dynamics NAV, you must create a .Zip file containing the Manifest and any resource files.
1. On your computer, in a folder of your choice, create the following structure
Image, Script and StyleSheet
2. Locate the Manifest.xml that you created in the previous steps, and copy this to the same folder structure.
3. Place images, scripts and stylesheet in the right folders.
In this walkthrough, we will leave the Image folder empty.

xhzgtyyvcsly.png

4. Select File and Folders, then right click the highlighted area
5. In the WinZip sub-menu, choose add to Zip File
6. Rename the .Zip File to DragDropCalendar.zip

kfhond9zj2a6.png

Copy the Control Add-in Assembly and Resource .Zip to the MS Dynamics NAV Development Environment

By default, this folder is C:\Program Files (x86)\Microsoft Dynamics NAV\100\RoleTailored Client\Add-ins

56orizamo58d.png

Registering the Control Add-in in Microsoft Dynamics NAV

To register the control Add-In, we must provide the following information:
Control Add-in name
The name of the control add-in, is determined by the tpd7pqkaty4m.png

The name in this walkthrough is DragDropCalendar.
Public key token
To determinate the public key token for the control Add-In:
a. Open Developer Command prompt for VS2017
b. At the command prompt, change to directory that contain the assembly
c. Type the following command: sn -T DragDropCalendarAddIn.dll
e94hw8y8pe7g.png

9gekhdfsrhfu.png

Include the control add-in in the control add-in page

In the Search box, enter Control Add-in and then choose related link.
Chose New, and then fill the column with the appropriate value.

a6wh1z533cce.png

With the Control add-in page still open, you import the resource (DragDropCalendar.zip) file.

sfcdx6181vmr.png

Create a Page to Display the Control Add-in

Before creating the page, you need to recover the list of resource, for this:
1. Create a new XmlPort called Export Resource List and set the properties like below:

amp86vrl6gmw.png

For this purpose, you will recover only the name of our resource:

The property Temporary of the Element SalesPerson must be set to Yes

h65o67lpcvwd.png

2. Add code to initialize our Temporary record.
o Add Global function: SetResource

cpa4v0fipu40.png

3. Create a Codeunit: Drag&Drop Calendar Management and add the following function.

z98vo9gjod1c.png

6bx36pmdusjp.png

0qulxmc3fhzm.png

4. Create a Page Drag & Drop Calendar

dd01xdpumd0s.png

Set the property of Field as below:

e9jcvkboeap6.png

To Add the C/AL Code triggers, locate the DragDropCalendar::ControlAddInReady() and add the following line.

h3lvrwzlqtq3.png

Download File: https://drive.google.com/open?id=1hZs2isJydxDMvXOiBJ0Zs6Rfqsigkx4h

Run the page and Enjoy.

u2oxif8hz0cl.png

Comments

  • aabbccaabbcc Member Posts: 2
    eutig6jos6tc.png



    From the picture to the page. What is the cause?
  • oldmatoldmat Member Posts: 1
    Same problem for me.
    Inside the manifest file I can see the reference to "ResourceScheduleMain.js" and ResourceSchedule.css", but I can't find links to those files in your post. Maybe this is the problem.
    Where can I find "ResourceScheduleMain.js" and ResourceSchedule.css" files ?
  • MMEDDAHMMEDDAH Member Posts: 5
    Sorry i mad a mistake.

    This is the right Manifest file.

    <?xml version="1.0" encoding="utf-8"?>
    <Manifest>
      <Resources>
        <Script>jquery-1.11.2.min.js</Script>
        <Script>jquery-ui.min.js</Script>
    	<Script>jquery.xml2json.min.js</Script>
        <Script>moment.min.js</Script>
        <Script>bootstrap.min.js</Script>
        <Script>fullcalendar.min.js</Script>
        <Script>DragDropCalendar.js</Script>
        <StyleSheet>DragDropCalendar.css</StyleSheet>
        <StyleSheet>fullcalendar.min.css</StyleSheet>
        <StyleSheet>bootstrap.min.css</StyleSheet>
      </Resources>
    
      <Script>
        <![CDATA[
            $(document).ready(function() 
            { 					
    			InitializeCalendar();
    			Microsoft.Dynamics.NAV.InvokeExtensibilityMethod('ControlAddInReady', null);
    		});
    	]]>
      </Script>
      <RequestedHeight>400</RequestedHeight>
      <RequestedWidth>900</RequestedWidth>
      <MinimumHeight>400</MinimumHeight>
      <MinimumWidth>900</MinimumWidth>
      <VerticalStretch>true</VerticalStretch>
      <HorizontalStretch>true</HorizontalStretch>
      <VerticalShrink>true</VerticalShrink>
      <HorizontalShrink>true</HorizontalShrink>
    </Manifest>
    
  • aabbccaabbcc Member Posts: 2
    edited 2018-03-21
    I have edited as you said. The result is this.
    150kpcgocy75.png

    This is Manifest.xml.
    3ysib7qhkhb3.png

    All file in project.
    hy449cuv3g86.png


    For jquery.xml2json.min.js file I downloaded it and got it. xml2json.min.js I'm not sure if this is relevant to the results. But I fixed it. jquery.xml2json.min.js Then follow the picture I sent.

    How do I fix a problem? To display the calendar.
    If possible, I would like to request a file. DragDropCalendar.csproj obtained at sign assembly.
    Thank you.
  • samausdensamausden Member Posts: 4
    Would love to try this out...
    Have you managed to get round the issue you are having?
  • JorgeJigsawJorgeJigsaw Member Posts: 1
    Thanks to this walktrough. It works for me in NAV 2015.
    However, I would like to show some information about the events when the mouse is over it. The eventMouseover and eventRender callbacks don't seem to work in my case.
  • ZIIZII Member Posts: 1
    @MMEDDAH hello mahdi I tried your solution and I get this result ez34j0fj1zfh.png can you help me thanks.
    PS: I am using NAV 2018
  • RickTweedleRickTweedle Member Posts: 2
    I am using 2018 as well and have the same issue ZII, any help getting this working would be great!
  • RickTweedleRickTweedle Member Posts: 2
    I got the issues resolved with making the sales people appear - just need to make it useful now (i.e. triggering events in NAV to says "appointment X for start datetime Y end datetime Z has changed"... and to add a way of populating the calendar with appointments.
    Excellent starting point / proof though
  • jony1833jony1833 Member Posts: 1
    Did someone make it works in 2018¿? Is the full project finished¿? Thanks
Sign In or Register to comment.