Forum Discussion

Hemant365's avatar
Hemant365
Copper Contributor
Jun 26, 2021

Custom task pane header in Microsoft Outlook addin

I have created the Outlook addin (which opens in compose email window), and specified displaName and iconUrl in manifest.xml like below:

 

 

 

 

<DisplayName DefaultValue="TrackTalents Test" />
<IconUrl DefaultValue="https://tracktalents.com/office365/assets/logo_48x48.png" /> 

 

 

 

 

Which reflects Icon and Name in below images (1. OptionMenu and 2. Sidepane).

I am having few questions regarding it:

1. Is there any option to to change Hight, width and margin of title using CSS in sidepane(2nd image)?

2. Is there any option to customize header of sidepane(2nd image) like setting background image or custom font in header?

 

I have gone through microsoft documentation in last few days but I have found no solution. I am new to Microsoft add-in's. Please help me if you have any idea regarding this. Here is my manifest.xml file:

 

 

 

 

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" xmlns:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides/1.0" xsi:type="MailApp">
  <Id>517d59e2-14ad-4db0-950b-38bd8973946c</Id>
 
  <Version>1.0.0.0</Version>
  <ProviderName>TrackTalents</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="TrackTalents Test" />
  <Description DefaultValue="TrackTalents for Outlook" />
  <IconUrl DefaultValue="https://tracktalents.com/office365/assets/logo_48x48.png" />
  <HighResolutionIconUrl DefaultValue="https://tracktalents.com/office365/assets/logo_128x128.png" />
  
  <SupportUrl DefaultValue="https://www.tracktalents.com/" />
  <AppDomains>
    <AppDomain>https://www.tracktalents.com/</AppDomain>
  
  </AppDomains>
  <Hosts>
    <Host Name="Mailbox" />
  </Hosts>
  <Requirements>
    <Sets>
      <Set Name="Mailbox" MinVersion="1.1" />
    </Sets>
  </Requirements>
  <FormSettings>
    <Form xsi:type="ItemRead">
      <DesktopSettings>
        <SourceLocation DefaultValue="https://localhost/taskpane.html" />
        <RequestedHeight>250</RequestedHeight>
      </DesktopSettings>
    </Form>
  </FormSettings>
  <Permissions>ReadWriteItem</Permissions>
  <Rule xsi:type="RuleCollection" Mode="Or">
    <Rule xsi:type="ItemIs" ItemType="Message" FormType="Read" />
  </Rule>
  <DisableEntityHighlighting>false</DisableEntityHighlighting>
  <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
    <Requirements>
      <bt:Sets DefaultMinVersion="1.3">
        <bt:Set Name="Mailbox" />
      </bt:Sets>
    </Requirements>
    <Hosts>
      <Host xsi:type="MailHost">
        <DesktopFormFactor>
          <FunctionFile resid="Commands.Url" />
         
          <ExtensionPoint xsi:type="MessageReadCommandSurface">
            <OfficeTab id="TabDefault">
              <Group id="msgReadGroup">
                <Label resid="GroupLabel" />
                <Control xsi:type="Button" id="msgReadOpenPaneButton">
                  <Label resid="TaskpaneButton.Label" />
                  <Supertip>
                    <Title resid="TaskpaneButton.Label" />
                    <Description resid="TaskpaneButton.Tooltip" />
                  </Supertip>
                  <Icon>
                    <bt:Image size="16" resid="Icon.16x16" />
                    <bt:Image size="32" resid="Icon.32x32" />
                    <bt:Image size="80" resid="Icon.80x80" />
                  </Icon>
                  <Action xsi:type="ShowTaskpane">
                    <SourceLocation resid="Taskpane.Url" />
                  </Action>
                </Control>

              </Group>
            </OfficeTab>
          </ExtensionPoint>
        </DesktopFormFactor>
      </Host>
    </Hosts>
    <Resources>
      <bt:Images>
        <bt:Image id="Icon.16x16" DefaultValue="https://tracktalents.com/office365/assets/logo_16x16.png" />
        <bt:Image id="Icon.32x32" DefaultValue="https://tracktalents.com/office365/assets/ioc-32.png" />
        <bt:Image id="Icon.80x80" DefaultValue="https://tracktalents.com/office365/assets/ioc-80.png" />
      </bt:Images>
      <bt:Urls>
        <bt:Url id="Commands.Url" DefaultValue="https://localhost/commands.html" />
     
        <bt:Url id="Taskpane.Url" DefaultValue="https://localhost/taskpane.html" />
      </bt:Urls>
      <bt:ShortStrings>
        <bt:String id="GroupLabel" DefaultValue="TrackTalents" />
        <bt:String id="TaskpaneButton.Label" DefaultValue="TrackTalents" />
      

      </bt:ShortStrings>
      <bt:LongStrings>
        <bt:String id="TaskpaneButton.Tooltip" DefaultValue="TrackTalents" />
      
 
      </bt:LongStrings>
    </Resources>
    <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides/1.1" xsi:type="VersionOverridesV1_1">
      <Requirements>
        <bt:Sets DefaultMinVersion="1.3">
          <bt:Set Name="Mailbox"/>
        </bt:Sets>
      </Requirements>
      <Hosts>
        <Host xsi:type="MailHost">
          <DesktopFormFactor>
            <FunctionFile resid="Commands.Url" />          
         
            <ExtensionPoint xsi:type="MessageReadCommandSurface">
              <OfficeTab id="TabDefault">
                <Group id="msgReadGroup">
                  <Label resid="GroupLabel" />
                  <Control xsi:type="Button" id="msgReadOpenPaneButton">
                    <Label resid="TaskpaneButton.Label" />
                    <Supertip>
                      <Title resid="TaskpaneButton.Label" />
                      <Description resid="TaskpaneButton.Tooltip" />
                    </Supertip>
                    <Icon>
                      <bt:Image size="16" resid="Icon.16x16" />
                      <bt:Image size="32" resid="Icon.32x32" />
                      <bt:Image size="80" resid="Icon.80x80" />
                    </Icon>
                    <Action xsi:type="ShowTaskpane">
                      <SourceLocation resid="Taskpane.Url" />
                      <SupportsPinning>true</SupportsPinning>                      
                    </Action>
                  </Control>

                </Group>
              </OfficeTab>
            </ExtensionPoint>
          </DesktopFormFactor>
        </Host>
      </Hosts>
      <Resources>
        <bt:Images>
          <bt:Image id="Icon.16x16" DefaultValue="https://tracktalents.com/office365/assets/logo_16x16.png" />
          <bt:Image id="Icon.32x32" DefaultValue="https://tracktalents.com/office365/assets/ioc-32.png" />
          <bt:Image id="Icon.80x80" DefaultValue="https://tracktalents.com/office365/assets/ioc-80.png" />
        </bt:Images>
        <bt:Urls>       
          <bt:Url id="Commands.Url" DefaultValue="https://localhost/commands.html" />
          <bt:Url id="Taskpane.Url" DefaultValue="https://localhost/taskpane.html" />
        </bt:Urls>
        <bt:ShortStrings>
          <bt:String id="GroupLabel" DefaultValue="TrackTalents" />
          <bt:String id="TaskpaneButton.Label" DefaultValue="TrackTalents" />
            
        </bt:ShortStrings>
        <bt:LongStrings>
          <bt:String id="TaskpaneButton.Tooltip" DefaultValue="TrackTalents" />
       
        </bt:LongStrings>
      </Resources>
      <WebApplicationInfo>
        <Id>ce8ae0ef-75af-4214-b443-3fc8bfe6ee01</Id>
        <Resource>api://XXX/ce8ae0ef-75af-4214-b443-3fc8bfe6ee01</Resource>
        <Scopes>
          <Scope>files.readwrite</Scope>
          <Scope>mail.read</Scope>
        </Scopes>
      </WebApplicationInfo>
    </VersionOverrides>
  </VersionOverrides>
</OfficeApp>

 

 

 

 

1 Reply

  • 546565723's avatar
    546565723
    Copper Contributor

    https://www.add-in-express.com/creating-addins-blog/2012/03/06/custom-office-task-panes/

Resources