0

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

1 Answer 1

1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.