CODEWITHSUNDEEP
ms-wordoffice-jsoffice-addinsword-web-addinscustomtaskpane
Deep Langhnoja
Deep Langhnoja

Reputation: 1

how to open taskpane when I click on button?

manifest.xml

  <Control xsi:type="Button" id="SmartFieldButton">
                                    <Label resid="SmartFieldButton.Label" />
                                    <Supertip>
                                        <Title resid="SmartFieldButton.Label" />
                                        <Description resid="SmartFieldButton.Tooltip" />
                                    </Supertip>
                                    <Icon>
                                        <bt:Image size="16" resid="smart_field_16x16" />
                                        <bt:Image size="32" resid="smart_field_32x32" />
                                        <bt:Image size="80" resid="smart_field_80x80" />
                                    </Icon>
                                    <Action xsi:type="ShowTaskpane">
                                        <TaskpaneId>CIBtn2</TaskpaneId>
                                        <SourceLocation resid="SmartField.Url" />
                                    </Action>
                                </Control>

enter image description here

when click this open button open below task pane in angular

enter image description here

open smartfield task when click open button

Upvotes: 0

Views: 108

Answers (1)

Eugene Astafiev
Eugene Astafiev

Reputation: 49455

Your XML markup for a custom ribbon command which opens a task pane looks good, for example, you may find the following sample markup in the Create add-in commands with the XML manifest article:

<!-- Define a control that shows a task pane. -->
<Control xsi:type="Button" id="Button2Id1">
  <Label resid="residLabel2" />
  <Tooltip resid="residToolTip" />
  <Supertip>
    <Title resid="residLabel" />
    <Description resid="residToolTip" />
  </Supertip>
  <Icon>
    <bt:Image size="16" resid="icon2_32x32" />
    <bt:Image size="32" resid="icon2_32x32" />
    <bt:Image size="80" resid="icon2_32x32" />
  </Icon>
  <Action xsi:type="ShowTaskpane">
    <SourceLocation resid="residUnitConverterUrl" />
  </Action>
</Control>

If you need to open the task pane programmatically, take a look at the Office.addin.showAsTaskpane() method:

function yourJSCallback() {
    Office.addin.showAsTaskpane()
    .then(function() {
        // Code that enables task pane UI elements for
        // working with the current quarter.
    });
}

Read more about that in the Show or hide the task pane of your Office Add-in article.

Note, to use the showAsTaskpane() and hide() methods, your add-in must use the shared runtime. For more information, see Configure your Office Add-in to use a shared runtime.

Upvotes: 1

Related Questions