14 Replies Latest reply on Jan 25, 2018 6:56 PM by Jim Bruce

    Remedy form with calendar function (Plug-in?)

    Isabel Irving

      Hello!

      I'm looking to develop a form which will have a calendar included in it.  The calendar should look something like an outlook calendar.

       

      It's for a room booking system.  I would like to be able to click on a part of the calendar to make a booking at that time and also to modify/delete existing requests

       

      I'm not sure if the AR System on its own provides what I'm looking for or whether there may be a Plug-In out there which would do the job for me.

       

      We have a totally bespoke solution, so no ITSM etc.

       

      Has anyone out there done anything similar?

       

      Thanks

      Isabel

      (Remedy 8.1, all users are on mid-tier)

        • 1. Re: Remedy form with calendar function (Plug-in?)
          Jim Bruce

          Hi Isabel, a similar question was asked recently on this thread Ideal/suggestion for calendar tool that operate with costum remedy application.

           

          I mentioned Full Calendar, a Javascript/jQuery project found at https://fullcalendar.io/   Read through their documentation to see if it meets your requirements.

           

          You can integrate this into a custom Remedy application fairly quickly without need for plugin development.

           

          Here is a screenshot of a Custom Calendar. Food for thought and hope this helps.

          -Jim

          Capture.PNG

          3 of 3 people found this helpful
          • 2. Re: Remedy form with calendar function (Plug-in?)
            Isabel Irving

            Jim

            Thanks for that.  I had seen that other thread but didn't see anything about integrating it with AR System so wasn't sure it could be integrated in a straightforward way.  So it's good to see the screenshot.

             

            Are there instructions online on the remedy side of what needs to be done?  e.g. is this a View Field?

             

            And does the code mentioned here https://fullcalendar.io/docs/usage/ need to go on a web page that is separate to the AR System itself or can it be embedded in a remedy form?

             

            Apologies if these are very basic questions - I have done lots of back end integrations with our remedy system but very little in the way of plugging in to other web pages.  And I haven't used CSS files with Remedy - would that be the place to start?

             

            Thank you!

            Isabel

            • 3. Re: Remedy form with calendar function (Plug-in?)
              Jim Bruce

              Isabel, here are the broad strokes for how you might approach this ...

               

              1. The Custom Calendar (screenshot provided above) user interface is a simple Remedy display form which includes a View Field for the integration.
              2. Create a regular form to contain HTML templates (my form is named JJB-WebContent). This contains a record with the calendar content (without data) you want displayed in the view field - for a good start refer to https://fullcalendar.io/js/fullcalendar-3.1.0/demos/basic-views.html
              3. Create a regular form to contain your calendar data (events) to be displayed (my form is named JJB-CalendarEvent)

               

              When the Custom Calendar is opened, you will need to implement Window Loaded active links.

              • set a temporary character field "zTemplate" from the WebContent your record from step 2 above. This template will contain a placeholder string "events: []" for the next step.
              • set a temporary character field "zEvents" with a JSON string built from your CalendarEvent records (see Example Events below). HINT: a filter service call is more efficient here instead of walking a client side table field.
              • set a temporary character field "zViewContent" with the template in "zTemplate" field, then replace string "events: []" with "events: " + $zEvents$
              • set View Field with $zViewContent$ and you should have a working calendar

               

              Example Events:

              {

                title: 'Christmas Day'

              ,  start: '2016-12-25T00:00:00'

              ,  color: 'goldenrod'

              },{

                title: 'Doctor appointment'

              ,  start: '2016-12-06T02:45:00'

              ,  end: '2016-12-06T03:45:00'

              ,  color: 'darkgreen'

              },

              ,{

                title: 'Request 456'

              ,  start: '2016-12-06T12:30:00'

              ,  end: '2016-12-06T03:45:00'

              ,  color: 'blue'

              ,  url: 'http://localhost:8080/arsys/forms/EXAMPLEREQUEST/000000000000456'

              }

               

              To answer some of your specific questions:

               

              You would refer to the fullcalendar js code in your WebContent record which you can either download or link to a Content Delivery Network (CDN). I link to the sites mentioned on their site.

               

              You don't need to worry about CSS - it's handled by the fullcalendar code. But it would be good to be familiar with javascript and Remedy workflow to communicate with view fields,

               

              Good luck,

              -Jim

              3 of 3 people found this helpful
              • 4. Re: Remedy form with calendar function (Plug-in?)
                Isabel Irving

                Thanks for the detailed reply, this looks as if it will do exactly what I'm looking for.

                 

                However.. for some reasons worthy of a Dilbert cartoon I can't currently do any actual development work to test this...(situation should hopefully change in the next day or two).

                 

                I'm wondering if I can do a proof of concept using an existing form that has a character field called "View field Data" and a View field and a button called "Test".  On clicking "Test", the View Field is set to the value of View Field Data.  Up to now its only been used with basic html.  I've tested it with some very basic javascript that I found online, and that worked.

                 

                Should I be able to paste in the contents of fullcalendar.js into 'View Field Data', manually replace "events []" with the example you provided, and see the results?  Or do I need something extra around it like <html> and <body>?

                 

                I've tried it, and the view field simply displays the text; it doesn't seem to realise there is any script there.

                • 5. Re: Remedy form with calendar function (Plug-in?)
                  Isabel Irving

                  UPDATE: added

                  <html>

                  <body>

                  <script>

                  before the script and the same in reverse with / at the end of the script and now it shows a blank page.  Which I think is progress....?

                  • 6. Re: Remedy form with calendar function (Plug-in?)
                    Jim Bruce

                    Hi Isabel, the data must contain a complete HTML document ... here is a starting template containing the 'bare bones' for the calendar.

                    Step 1 : paste this into "View field Data", then Test. At this point, not much to see (probably just "Example Calendar".

                     

                    <!DOCTYPE html>

                    <html>

                    <head>

                      <script>

                      </script>

                     

                      <style>

                      </style>

                    </head>

                     

                    <body>

                      <div id="heading">Example Calendar</div>

                      <div id='calendar'></div>

                    </body>

                    </html>

                     

                    Step 2 : add some style to the body and div elements for ids "heading" and "calendar". This will make it a little prettier.

                    Replace the <style> section with this, then Test:

                     

                    <style>

                    body {

                      background-color: aliceblue;

                      margin: 20px 20px;

                      padding: 0;

                      font-family: Verdana,sans-serif;

                      font-size: 10pt;

                    }

                    #calendar {

                      max-width: 1200px;

                      margin: 0 auto;

                    }

                    #heading {

                      font-size: 16pt;

                      text-align: center;

                      width: 100%;

                    }

                    </style>

                     

                    Back in a few minutes with next steps.

                    -Jim

                    • 7. Re: Remedy form with calendar function (Plug-in?)
                      Jim Bruce

                      Ok, the next steps involve linking to the required fullcalendar CSS and Javascript resources, then adding your custom code to render the calendar.

                       

                      Step 3 : right after the <head> tag, add the following link and script tags. I previously mentioned I use the resources from CDN - you can also download them to a local web server if you prefer.

                       

                      <link href='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css' rel='stylesheet' />

                      <link href='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.print.css' rel='stylesheet' media='print' />

                      <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

                      <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script>

                      <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>

                       

                      Step 4 : next is your custom javascript code which you add right after the resources from the previous step.

                       

                      <script>

                        $(document).ready(function() {

                        $('#calendar').fullCalendar({

                        header: {

                        left: 'prev,next today',

                        center: 'title',

                        right: 'month,agendaWeek,agendaDay'

                        },

                        navLinks: true,

                        editable: true,

                        nowIndicator: true,

                        weekNumbers: true,

                        fixedWeekCount: false,

                        weekends: true,

                        eventLimit: true,

                        events: [],

                        eventClick: function(event) {

                        if (event.id) {

                        // TODO

                        alert( 'Edit event: ' + event.id + '-' + event.title );

                        }

                        },

                        dayClick: function(date, jsEvent, view) {

                        if (date) {

                        // TODO

                        alert( 'Add event: ' + date.format('YYYY-MM-DD') );

                        }

                        }

                        });

                       

                        $('#calendar').fullCalendar('today');

                        });

                      </script>

                       

                      Test now and you should have a working calendar!

                       

                      However, now need to create Remedy workflow to include events from your new room booking system.

                      Replace the "events: []," string above with your data, for example:

                       

                      events: [

                        {

                         id: '000000000000001'

                        ,  title: 'Christmas Day'

                        ,  start: '2016-12-25T00:00:00'

                        ,  color: 'green'

                        },{

                         id: '000000000000002'

                        ,  title: 'New Years Day'

                        ,  start: '2017-01-01T00:00:00'

                        ,  color: 'green'

                        }

                      ]

                       

                      Hope this helps.

                      -Jim

                      1 of 1 people found this helpful
                      • 8. Re: Remedy form with calendar function (Plug-in?)
                        Isabel Irving

                        Hooray!  This is great!  It works!!!  And better still, I understand why it works.  Thank you for the clear explanation

                         

                        My next task will be to work out how to open a remedy dialog when the user clicks on an event.  I think I need to send an event back to the remedy page, or call an active link guide. Any tips on that?  Maybe I should put that in a thread of its own.

                         

                        I'll mark this as answered in the meantime as the steps you provided have absolutely answered my original question.

                         

                         

                        • 9. Re: Remedy form with calendar function (Plug-in?)
                          Isabel Irving

                          Oh... it's not letting me mark this as answered.  Under Actions it says "No actions are available".  Haven't used this forum much before so I may be missing something obvious here...

                          • 10. Re: Remedy form with calendar function (Plug-in?)
                            Jim Bruce

                            Glad to hear it's working for you Isabel. I'm not sure how you mark this as resolved or answered.

                             

                            On my Remedy form, I have 2 hidden character fields to receive the data when the calendar is clicked on:

                             

                            1. selectedEventID fieldid(880000190)
                            2. selectedDateString fieldid(880000191)

                             

                            With that information, here are a couple hints to get your dialogs in motion - they are marked as TODO in the javascript code.

                             

                            eventClick: function(event) {

                              if ( event.id ) {

                              // set Remedy field selectedEventID

                              parent.window.F(880000190).DoSet( event.id ); 

                             

                              // call Remedy guide to edit the event

                              setTimeout(function(){

                              parent.arInvokeGuide(0,serverName,'CUSCAL-EditEvent'); 

                              }, 50);

                              }

                            }

                            dayClick: function(date, jsEvent, view) {

                              if ( date ) {

                              // set Remedy field selectedDateString

                              parent.window.F(880000191).DoSet(date.format('YYYY-MM-DD')); 

                             

                              // call Remedy guide to create a new event for selected date

                              setTimeout(function(){

                              parent.arInvokeGuide(0,serverName,'CUSCAL-NewEvent'); 

                              }, 50);

                              }

                            }

                             

                            -Jim

                            1 of 1 people found this helpful
                            • 11. Re: Remedy form with calendar function (Plug-in?)
                              Jens Berger

                              First: Thank you for this very cool solution with the "Fullcalendar" and sorry for my terrible english.

                              Can i ask one or two questions ?

                              If i have a regular form with many Dates and Titles. How i can replace the "event[]"-String in the HTML-Code with all the Events of my Regular-Form?

                               

                              Thank You

                              • 12. Re: Remedy form with calendar function (Plug-in?)
                                Jim Bruce

                                Hello Jens, there are probably a few ways you could do this. My preference is to create a Service filter which you can call via an active link from the user interface. Your Service filter should:

                                 

                                1. may accept input parameters from your user interface (eg. LoginName, DateRange).
                                2. run a Direct SQL query or perhaps walk a table field with your Regular-Form events.
                                3. return a character field zEvents containing the events you need to render.

                                 

                                With the returned string, add it to the template using function:

                                REPLACE($zTemplate$, "events: []", "events: " + $zEvents)

                                 

                                Last step, set the View Field with the contents of the template field.

                                Hope this helps,

                                -Jim

                                • 13. Re: Remedy form with calendar function (Plug-in?)
                                  Jens Berger

                                  Hello Jim,

                                  your answer helps me a lot. Thank you. I thought i have done it, but now another problem. :-( :

                                  The Calendar need a special Date Time-Format. My AL-Guide produces 15.03.2018 00:00:00. The Calendar cant show this. It seems that i have to convert the DATE. In ARS or the calendar? I don´t know...

                                   

                                  Thank you.

                                  Jens

                                  • 14. Re: Remedy form with calendar function (Plug-in?)
                                    Jim Bruce

                                    Hello Jens, if you build your list of Events using Remedy, use workflow functions to construct the date in a format needed by the Calendar, for example (assuming $someDate$ is the date field on your Regular form):

                                     

                                    YEAR($someDate$) + "-" +

                                    LPAD(MONTH($someDate$), 2, "00") + "-" +

                                    LPAD(DAY($someDate$), 2, "00") + "T" +

                                    LPAD(HOUR($someDate$), 2, "00") + ":" +

                                    LPAD(MINUTE($someDate$), 2, "00") + ":" +

                                    LPAD(SECOND($someDate$), 2, "00")

                                     

                                    If you used Direct SQL to build you Event list, check the DBMS docs (Oracle, SQL Server) for a similar function.

                                     

                                    -Jim

                                    2 of 2 people found this helpful