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>
when click this open button open below task pane in angular
open smartfield task when click open button


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:
If you need to open the task pane programmatically, take a look at the
Office.addin.showAsTaskpane()method:Read more about that in the Show or hide the task pane of your Office Add-in article.
Note, to use the
showAsTaskpane()andhide()methods, your add-in must use the shared runtime. For more information, see Configure your Office Add-in to use a shared runtime.