none
open Outlook Scheduling assistant on click of a button RRS feed

  • Question

  • Hi,

    I have an HTML page which displays all the conference rooms as Grid View. User can Select Multiple Rows (Room) , there is a button "Check Availability" , What I need is , When user clicks on "check Availability" button , it should open Outlook Scheduling Assistant with selected Rooms , so user can see the availability of each room.

    The Page is pure HTML page which is displaying Conference Rooms.

    Could you please help?

    Thanks

    Azra


    With Thanks and Regards, Azra

    Friday, July 25, 2014 9:42 AM

Answers

All replies

  • Hello Azra,

    Could you please be more specific? Where does the Outlook Scheduling Assistant come from? Does it belong to an add-in? Could please take a screenshot?


    Friday, July 25, 2014 11:25 AM
  • Here is the image of my HTML page,

    What I need is ,when user clicks on "Check Availability" button , it should open Outlook Scheduler in new window with p repopulated rooms values selected from the html page.

    I am not using any Add-in it is a simple HTML Page.


    With Thanks and Regards, Azra

    Friday, July 25, 2014 12:50 PM
  • Azra,

    Where is the Check Availability button located? Is it a Ribbon button? If so, you can intercept the Click event. See Temporarily Repurpose Commands on the Office Fluent Ribbon for more information.

    BTW Do you develop a COM add-in or VBA macro?

    Friday, July 25, 2014 2:19 PM
  • here is the code

    <Style>
    
    .conftable{
    	padding:5px;
    }
    
    .conftable th{
    	background-color:#d1e0e7;
    	border-bottom:2px solid #99afbb;
    	font-family:calibri, Arial, Helvetica, sans-serif;
    	color:#002a50;
    	font-size:14px;
    	font-weight:bold;
    }
    
    .conftable td{
    	background-color:#FFFFFF;
    	border-bottom:1px solid #99afbb;
    	font-family:calibri, Arial, Helvetica, sans-serif;
    	color:#000000;
    	font-size:14px;
    	font-weight:bold;
    
    }
    .conftable td img{
    	border:0;
    }
    
    .btn {
      font-family:calibri, Arial, Helvetica, sans-serif;
      color: #ffffff;
      font-size: 14px;
      background: #0a5d8b;
      padding: 10px 15px 10px 15px;
      text-decoration: none;
      border:none;
    }
    
    .btn:hover {
      background: #3cb0fd;
      text-decoration: none;
    }
    
    a.tooltip {outline:none; }
    a.tooltip strong {line-height:30px;}
    a.tooltip:hover {text-decoration:none;} 
    a.tooltip span {
        z-index:10;display:none; padding:14px 20px;
        margin-top:-30px; margin-left:8px;
        width:240px; line-height:16px;
    
    }
    a.tooltip:hover span{
        display:inline; ; color:#111;
        border:1px solid #323532; background:#FFFFFF;
    	font-family:calibri, Arial, Helvetica, sans-serif;
    	color:#000;
    	font-size:14px;	
    	
    	}
    	
    a.tooltip:hover span h3{
    	font-family:calibri, Arial, Helvetica, sans-serif;
    	color:#087ebf;
    	font-size:14px;
    	font-weight:bold;
    	padding:0;
    	margin:0;
    	}
    	
    .callout {z-index:20;;top:30px;border:0;left:-12px;}
        
    a.tooltip span
    {
        border-radius:4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-box-shadow: 5px 5px 8px #CCC;
        -webkit-box-shadow: 5px 5px 8px #CCC;
        box-shadow: 5px 5px 8px #CCC;
    }
    </style>
    
    <table width="1005" border="0" cellspacing="1" cellpadding="8" class="conftable">
      <tr>
       <th align="left" valign="middle">​​&#160;</th>
        <th align="left" valign="middle">Conference Room</th>
        <th align="left" valign="middle">Maximum Capacity</th>
        <th align="left" valign="middle">Video Monitor</th>
        <th align="left" valign="middle">Computer </th>
        <th align="left" valign="middle">Conference Phone</th>
        <th align="left" valign="middle">Video Teleconference </th>
        <th align="left" valign="middle">Lync</th>
      </tr>
      <tr>
      <td align="center" valign="middle"><input type="checkbox" name="checkbox" id="checkbox" /></td>
        <td align="left" valign="middle">Adams Conference Room</td>
        <td align="center" valign="middle">10</td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
      </tr>
      <tr>
      <td align="center" valign="middle"><input type="checkbox" name="checkbox1" id="checkbox1" /></td>
        <td align="left" valign="middle">Adams Training Room North <a href="#" class="tooltip"><img src="/SiteAssets/images/icon-info.png" width="16" height="16" alt="Info" />
                        <span>
           					 <img class="callout" src="/SiteAssets/images/callout.gif" />
           						 <h3>Conference Room Details:</h3><br />
           						  Room Configuration / Capacity Options <br />Townhall -50<br /> Training -24        
       					 </span>
        
        
        </a></td>
        <td align="center" valign="middle">15</td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
      </tr>
      <tr>
      <td align="center" valign="middle"><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
        <td align="left" valign="middle">Adams Training Room South&nbsp; <a href="#" class="tooltip"><img src="/SiteAssets/images/icon-info.png" width="16" height="16" alt="Info" />
          <span>
            <img class="callout" src="/SiteAssets/images/callout.gif" />
            <h3>Conference Room Details:</h3><br />
            Room Configuration / Capacity Options <br />Townhall -50<br /> Training -24   
            </span>
          
          
        </a></td>
        <td align="center" valign="middle">15</td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
      </tr>
      <tr>
      <td align="center" valign="middle"><input type="checkbox" name="checkbox3" id="checkbox3" /></td>
        <td align="left" valign="middle">Bluebeard Boardroom (Lower)</td>
        <td align="center" valign="middle">20</td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
      </tr>
      <tr>
      <td align="center" valign="middle"><input type="checkbox" name="checkbox4" id="checkbox4" /></td>
        <td align="left" valign="middle">Bluebeard Conference Room (Upper)</td>
        <td align="center" valign="middle">12</td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
      </tr>
      <tr>
      <td align="center" valign="middle"><input type="checkbox" name="checkbox5" id="checkbox5" /></td>
        <td align="left" valign="middle">Tunick Conference Room</td>
        <td align="center" valign="middle">10</td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
      </tr>
      <tr>
      <td align="center" valign="middle"><input type="checkbox" name="checkbox6" id="checkbox6" /></td>
        <td align="left" valign="middle">Yacht Haven Grande Conference Room (Upper)</td>
        <td align="center" valign="middle">10</td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
      </tr>
      <tr>
      <td align="center" valign="middle"><input type="checkbox" name="checkbox7" id="checkbox7" /></td>
        <td align="left" valign="middle">Yacht Haven Grande Quiet Room Room #1 (Upper)</td>
        <td align="center" valign="middle">6</td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
      </tr>
      <tr>
      <td align="center" valign="middle"><input type="checkbox" name="checkbox8" id="checkbox8" /></td>
        <td align="left" valign="middle">Yacht Haven Grande Quiet Room Room #2 (Upper)</td>
        <td align="center" valign="middle">3</td>
        <td align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
      </tr>
      <tr>
      <td align="center" valign="middle"><input type="checkbox" name="checkbox9" id="checkbox9" /></td>
        <td align="left" valign="middle">Yacht Haven Grande Conference Room (Lower) </td>
        <td align="center" valign="middle">10</td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
      </tr>
      <tr>
      <td align="center" valign="middle"><input type="checkbox" name="checkbox10" id="checkbox10" /></td>
        <td align="left" valign="middle">Yacht Haven Grande Quiet Room Room #1 (Lower) </td>
        <td align="center" valign="middle">4</td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
      </tr>
      <tr>
      <td align="center" valign="middle"><input type="checkbox" name="checkbox11" id="checkbox11" /></td>
        <td align="left" valign="middle">Yacht Haven Grande Quiet Room Room #2 (Lower) </td>
        <td align="center" valign="middle">3</td>
        <td align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle"><img src="/SiteAssets/images/green-tick.png" width="17" height="16" alt="" /></td>
        <td align="center" valign="middle">&nbsp;</td>
        <td align="center" valign="middle">&nbsp;</td>
      </tr>
    </table>
    <table width="1005" border="0" cellspacing="0" cellpadding="5">
      <tr>
        <td align="right" valign="middle"><input name="button" type="submit" class="btn" id="button" value="Check Availability" onClick="location.href='https://webmail.icmcvi.com/owa/?ae=Item&a=New&t=IPM.Appointment'" /></td>
      </tr>
    </table>


    With Thanks and Regards, Azra

    Friday, July 25, 2014 2:56 PM
  • You can't do what you want. You'd need a COM addin to intercept a button click and to automate Outlook. You can't do it with just an HTML page.

    Ken Slovak MVP - Outlook

    Friday, July 25, 2014 3:37 PM
    Moderator
  • Outlook doesn't allow to get the job done only with an HTML page. You need to develop a COM add-in. Please see the link provided in my previous post there.
    Friday, July 25, 2014 4:20 PM