I'm using NetOffice developing an MS Outlook AddIn, and I want to add a custom context menu item in the calendar, to allow users add a new custom appointment for the selected time range.
So as written in this article I define my additional item in the RibbonUI.xml following way:
<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui" onLoad="OnLoadRibonUI">
<ribbon>
<tabs>
<tab idMso="TabAppointment">
<group id="Group0" label="Addin" insertBeforeMso="GroupShow">
<button id="convertButton" label="Convert" getImage="ConvertImage" size="large" onAction="ConvertButton_Click" />
</group>
</tab>
<tab idMso="TabCalendar">
<group id="Group1" label="Addin" insertBeforeMso="GroupGoto">
<button id="aboutButton" label="New Custom Meeting" getImage="GetNewImage" size="large" onAction="NewMeetingButton_Click" />
<dialogBoxLauncher>
<button id="settingsButton" screentip="Addin Settings" onAction="SettingsButton_Click"/>
</dialogBoxLauncher>
</group>
</tab>
</tabs>
</ribbon>
<contextMenus>
<contextMenu idMso="ContextMenuCalendarView">
<button id="MyContextMenuCalendarView"
label="ContextMenuCalendarView"
onAction="OnMyButtonClick"/>
</contextMenu>
</contextMenus>
</customUI>
But as soon as I add the <contextMenus> node, the xml isn't working anymore, not the add in doesn't add any context menu, but it also doesn't add any buttons anymore - whereas the buttons are added when the <contextMenus> node is not defined.
Any tips how to debug this issue?
EDIT:
thanks to the tip from Dmitry I found the issue the xmlns namespace was an old one, so instead of:
xmlns="http://schemas.microsoft.com/office/2006/01/customui"
it should be:
xmlns="http://schemas.microsoft.com/office/2009/07/customui"
I can't see anything wrong off the top of my head, but enable the dev mode in Outlook - this way Outlook will report all problems in your XML. Click File | Options | Advanced | Developers | Show add-in user interface errors.
Related
I have following structure in Shell View
<FlyoutItem Route="home" Title="Home">
<ShellContent ContentTemplate="{DataTemplate views:HomePage}" />
</FlyoutItem>
<FlyoutItem Route="leaverequest" Title="Leave Request">
<ShellContent ContentTemplate="{DataTemplate views:LeaveRequestView}" />
</FlyoutItem>
The items are appearing properly.
When I click on Leave Request item, the LeaveRequestView opens with a Hamburger menu in top navigation. I want the LeaveRequestView to show a back button instead.
I have tried setting Route attribute in ShellContent instead of FlyoutItem but the result is same.
Is there something to be done in the route definition above or this is a property to be set in LeaveRequestView XAML?
PS: If I navigate in code behind using Shell.Current.GoToAsync("leaverequest"), the behavior is right. I see the back button on top navigation.
Unfortunately, it can not show the back button with follow defined XAML.
<FlyoutItem Route="home" Title="Home">
<ShellContent ContentTemplate="{DataTemplate views:HomePage}" />
</FlyoutItem>
<FlyoutItem Route="leaverequest" Title="Leave Request">
<ShellContent ContentTemplate="{DataTemplate views:LeaveRequestView}" />
</FlyoutItem>
From above the route definition above, we can not make the LeaveRequestView to show a back button.
Because it's designed by Xamarin Forms Shell. If using FlyoutItem in XAML, it means the child view will be navigated by Humburger menu.
As your said, unless using Shell.Current.GoToAsync("leaverequest") to navigate, the back button will show. Meanwhile, you will see that Humburger menu not shows not.
Note :This should be the typical feature of Xamarin Forms FlyoutItem. If not need this feature, you will not need to create a Shell application.
Consider the following Xamarin.Forms Shell XAML:
<TabBar>
<Tab Title="Page1" Route="page1" Icon="page1.png">
<ShellContent ContentTemplate="{DataTemplate local:Page1}" />
</Tab>
<Tab Title="Page2" Route="page2" Icon="page2.png">
<ShellContent ContentTemplate="{DataTemplate local:Page2}" />
<ShellContent Route="page2a" ContentTemplate="{DataTemplate local:Page2A}" />
</Tab>
<Tab Title="Page3" Route="page3" Icon="page3.png">
<ShellContent ContentTemplate="{DataTemplate local:Page3}" />
</Tab>
</TabBar>
This results in 3 bottom tabs. On Page 2 there are also two top tabs.
I can navigate successfully with calls like:
.GoToAsync("//page1") and .GoToAsync("//page2/page2a")
What I would like to do is have Page2A as a page that gets pushed on top of the Page2 tab. So when I call GoToAsync("//page2/page2a") the App navigates to the Page2 tab, but displays the Page2A page on top. I'd like no top tabs, but rather the Page2A NavBar would have the back button visible, and when pressed Page2A would be popped from the stack and Page2 would again be visible.
Is there any way to achieve this with Shell, perhaps by adjusting my XAML?
At the moment I'm just using the old PushAsync(..) method, but it seems a shame to not take advantage of Shell's navigation features.
When you want to push the page on the top without page tab on the top, you could use the code below.
Navigation.PushModalAsync(new NavigationPage(new ShellTabPage1_2()));
If you want the back button, you could create with ToolbarItem.
<ContentPage.ToolbarItems>
<ToolbarItem
IconImageSource="back_button.png"
Order="Primary"
Priority="0"
Clicked="ToolbarItem_Clicked"/>
</ContentPage.ToolbarItems>
<ContentPage.Content>
<StackLayout>
<Label
HorizontalOptions="CenterAndExpand"
Text="Welcome to Shell Tab Page 1-2!"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
I could navigate to the shell page via reset the MainPage.
App.Current.MainPage = new ShellPage();
But, it could not navigate to the shell tab page.
We could navigate to the previous page in shell.
await Navigation.PopModalAsync(false);
If you want to make the back button at left, you could do that with custom renderer.
I would like to add a custom command to the context menu of each node that appears for every table in a sql server database listed in the Server Explorer.
I've gone through a basic tutorial and added a command to the tools menu bar as well as a custom top level menu.
I've also seen the tutorial Extending the Server Explorer to Display Web Parts which is very close to what I want to do, but it is specific to the sharepoint connections node, and uses the sharepoint specific IExplorerNodeTypeExtension interfaces. I'm having trouble finding any documentation pertaining to the data connections node. Can anyone provide any references to relevant documentation or information on what interfaces I should be leveraging?
With some hints from Jack Zhai and a few other web resources I was able to track down information.
Stack Overflow - Context menu for Server Explorer
MSDN blog - How to add custom menu to vs editor window
MSDN Blog - Using EnableVSIPLogging to identify menus and commands with VS 2005
So first, I enabled VSIPLogging by setting the EnableVSIPLogging to 1 in Computer\HKEY_CURRENT_USER\SOFTWARE\Microsoft\VisualStudio###\General
Then I was able to determine what the guids and ids of any menu item or tree node in Visual Studio by holding down CTRL + SHIFT and right clicking on it.
From this I was able to determine that the top level nodes in the server explorer had a Guid of {74D21310-2AEE-11D1-8BFB-00A0C90F26F7} with a command id of 1283.
Object nodes in the server explorer (such as Tables, stored procedures, etc) have a Guid of {d4f02a6a-c5ae-4bf2-938d-f1625bdca0e2} and a command id of 33280 (0x8200)
Object node parents in the server explorer (such as the static "Tables", "Stored procedures", nodes that categorize the object nodes) have a guid of {d4f02a6a-c5ae-4bf2-938d-f1625bdca0e2} and a command id of 33024 (0x8100)
So with these Guids I can now attach my commands where I want.
I want a command that is specific to an individual table, and a command that is specific to all tables in the database so I will use a d4f02a6a-c5ae-4bf2-938d-f1625bdca0e2 with command id of 0x8200 and a Guid of d4f02a6a-c5ae-4bf2-938d-f1625bdca0e2 with command id of 0x8100.
Next I need to define these values in my vsct file of my VSIX project so I add them to the symbols section:
I add 2 command items to my project and then I need to change the parent of the groups so they appear on the correct area in the server explorer:
Now, the database command does appear for all static object nodes, even though I want it to only appear on the "Tables" node, and the table command appears for all object nodes and their, even though I want it to appear only for the table node itself. I believe that needs to be solved in code somehow, dynamically determining the visibility of the command menu item, but I'll have to figure that one one separately.
Below is the vsct in its entirety:
<?xml version="1.0" encoding="utf-8"?>
<CommandTable xmlns="http://schemas.microsoft.com/VisualStudio/2005-10-18/CommandTable" xmlns:xs="http://www.w3.org/2001/XMLSchema">
<!-- This is the file that defines the actual layout and type of the commands.
It is divided in different sections (e.g. command definition, command
placement, ...), with each defining a specific set of properties.
See the comment before each section for more details about how to
use it. -->
<!-- The VSCT compiler (the tool that translates this file into the binary
format that VisualStudio will consume) has the ability to run a preprocessor
on the vsct file; this preprocessor is (usually) the C++ preprocessor, so
it is possible to define includes and macros with the same syntax used
in C++ files. Using this ability of the compiler here, we include some files
defining some of the constants that we will use inside the file. -->
<!--This is the file that defines the IDs for all the commands exposed by VisualStudio. -->
<Extern href="stdidcmd.h" />
<!--This header contains the command ids for the menus provided by the shell. -->
<Extern href="vsshlids.h" />
<!--The Commands section is where commands, menus, and menu groups are defined.
This section uses a Guid to identify the package that provides the command defined inside it. -->
<Commands package="guidCRUDSPCommandsPackage">
<!-- Inside this section we have different sub-sections: one for the menus, another
for the menu groups, one for the buttons (the actual commands), one for the combos
and the last one for the bitmaps used. Each element is identified by a command id that
is a unique pair of guid and numeric identifier; the guid part of the identifier is usually
called "command set" and is used to group different command inside a logically related
group; your package should define its own command set in order to avoid collisions
with command ids defined by other packages. -->
<!-- In this section you can define new menu groups. A menu group is a container for
other menus or buttons (commands); from a visual point of view you can see the
group as the part of a menu contained between two lines. The parent of a group
must be a menu. -->
<Groups>
<!-- Table scope -->
<Group guid="guidCRUDSPCommandsPackageCmdSet1" id="TableMenuGroup" priority="0x0600">
<!--<Parent guid="guidSHLMainMenu" id="IDM_VS_MENU_TOOLS" />-->
<Parent guid="guidServerExplorerObjectNode" id="IDMX_DV_OBJECT_NODE" />
</Group>
<!-- Database scope -->
<Group guid="guidCRUDSPCommandsPackageCmdSet1" id="DatabaseMenuGroup" priority="0x0600">
<!--<Parent guid="guidSHLMainMenu" id="IDM_VS_MENU_TOOLS" />-->
<Parent guid="guidServerExplorerObjectNode" id="IDMX_DV_STATIC_NODE" />
</Group>
</Groups>
<!--Buttons section. -->
<!--This section defines the elements the user can interact with, like a menu command or a button
or combo box in a toolbar. -->
<Buttons>
<!--To define a menu group you have to specify its ID, the parent menu and its display priority.
The command is visible and enabled by default. If you need to change the visibility, status, etc, you can use
the CommandFlag node.
You can add more than one CommandFlag node e.g.:
<CommandFlag>DefaultInvisible</CommandFlag>
<CommandFlag>DynamicVisibility</CommandFlag>
If you do not want an image next to your command, remove the Icon node /> -->
<Button guid="guidCRUDSPCommandsPackageCmdSet1" id="cmdidCmdTable" priority="0x0100" type="Button">
<Parent guid="guidCRUDSPCommandsPackageCmdSet1" id="TableMenuGroup" />
<Icon guid="guidImages" id="bmpPic1" />
<Strings>
<ButtonText>Command for Table</ButtonText>
</Strings>
</Button>
<Button guid="guidCRUDSPCommandsPackageCmdSet1" id="cmdidCmdDatabase" priority="0x0100" type="Button">
<Parent guid="guidCRUDSPCommandsPackageCmdSet1" id="DatabaseMenuGroup" />
<Icon guid="guidImages1" id="bmpPic1" />
<Strings>
<ButtonText>Command for Database</ButtonText>
</Strings>
</Button>
</Buttons>
<!--The bitmaps section is used to define the bitmaps that are used for the commands.-->
<Bitmaps>
<!-- The bitmap id is defined in a way that is a little bit different from the others:
the declaration starts with a guid for the bitmap strip, then there is the resource id of the
bitmap strip containing the bitmaps and then there are the numeric ids of the elements used
inside a button definition. An important aspect of this declaration is that the element id
must be the actual index (1-based) of the bitmap inside the bitmap strip. -->
<Bitmap guid="guidImages" href="Resources\CmdTable.png" usedList="bmpPic1, bmpPic2, bmpPicSearch, bmpPicX, bmpPicArrows, bmpPicStrikethrough" />
<Bitmap guid="guidImages1" href="Resources\CmdDatabase.png" usedList="bmpPic1, bmpPic2, bmpPicSearch, bmpPicX, bmpPicArrows, bmpPicStrikethrough" />
</Bitmaps>
</Commands>
<Symbols>
<!-- {d4f02a6a-c5ae-4bf2-938d-f1625bdca0e2} is the object node in the server explorer -->
<GuidSymbol name="guidServerExplorerObjectNode" value="{d4f02a6a-c5ae-4bf2-938d-f1625bdca0e2}">
<!--server explorer - table-->
<IDSymbol name="IDMX_DV_OBJECT_NODE" value="0x8200" />
<IDSymbol name="IDMX_DV_STATIC_NODE" value="0x8100" />
</GuidSymbol>
<!-- {74D21310-2AEE-11D1-8BFB-00A0C90F26F7} is the server explorer -->
<GuidSymbol name="guidServerExplorer" value="{74D21310-2AEE-11D1-8BFB-00A0C90F26F7}">
<!--server explorer - table-->
<IDSymbol name="IDMX_DV_SERVER_NODE" value="0x503" />
</GuidSymbol>
<!-- This is the package guid. -->
<GuidSymbol name="guidCRUDSPCommandsPackage" value="{a71670bc-ef23-40a3-b8a0-ed872b79476c}" />
<!-- Constants-->
<GuidSymbol value="{946311de-35f2-4379-84e2-91867976faf8}" name="guidCRUDSPCommandsPackageCmdSet1">
<IDSymbol value="256" name="cmdidCmdTable" />
<IDSymbol value="257" name="cmdidCmdDatabase" />
<IDSymbol value="258" name="TableMenuGroup" />
<IDSymbol value="259" name="DatabaseMenuGroup" />
</GuidSymbol>
<GuidSymbol value="{679ecb35-41d9-4021-933b-ec6b25afc100}" name="guidImages">
<IDSymbol name="bmpPic1" value="1" />
<IDSymbol name="bmpPic2" value="2" />
<IDSymbol name="bmpPicSearch" value="3" />
<IDSymbol name="bmpPicX" value="4" />
<IDSymbol name="bmpPicArrows" value="5" />
<IDSymbol name="bmpPicStrikethrough" value="6" />
</GuidSymbol>
<GuidSymbol value="{9392ca3d-3400-4b7a-a691-7108032249cd}" name="guidImages1">
<IDSymbol name="bmpPic1" value="1" />
<IDSymbol name="bmpPic2" value="2" />
<IDSymbol name="bmpPicSearch" value="3" />
<IDSymbol name="bmpPicX" value="4" />
<IDSymbol name="bmpPicArrows" value="5" />
<IDSymbol name="bmpPicStrikethrough" value="6" />
</GuidSymbol>
</Symbols>
</CommandTable>
I am trying to create an app with NativeScript with the following layout:
On top, action bar
Content Area in the center (about 80% of screen height)
Fixed menu on bottom with 4 buttons
I know that NativeScript provides a TabView, however this view puts the menu on top for the android version of the app,and doesn't allow to use images as "ItemTitle".
So (I think) this leaves me with two options :
Create 4 different pages and load them when a user taps on the menu
buttons
Create one single page and change content according to user
selection
The first approach is great because I get to separate all xml , js and css files. However navigating between pages can take some time and doesn't give ideal user experience.
The second approach probably will have a better user experience but code will be very hard to maintain.
Which option should I use? Have any of you dealt with a similar layout?
Thank you for your time!
In my app I use the TabView with partial-views in each tab-item. So for each tab-view the content is separated in their own xml,js,css files.
So why not just take this approach and combine it with your option 2?
You could create a main-view with:
ActionBar
Centered main-content for partial-views (Stack- og GridLayout)
SegmentedBar at the bottom for navigation buttons
When the user taps a button on the SegmentedBar, you change the visibility of the corresponding partial-view.
You can use any font-icons as "images" for your title in the SegmentedBar also.
UPDATE: Added examples below.
How to create and reference partial-views
In your main-view Page-element add the references to each partial view, like here:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded"
xmlns:t1="partial-views/tab1"
xmlns:t2="partial-views/tab2"
xmlns:t3="partial-views/tab3">
Each partial view consists of a .xml, .js and perhaps a .css file. I like to place each partial view in separate folders: tab1, tab2, tab3 as an example.
The partial-view xml file would contain only the view-modules, no page-modules. So don't add any Page or ActionBar here. Example of a partial view .xml:
<GridLayout loaded="viewLoaded">
<ListView items="{{ someItemList }}">
<ListView.itemTemplate>
...
</ListView.itemTemplate>
</ListView>
</GridLayout>
How to use partial-views
Now, it's up to you how you want to use the partial-views. Here is an example on how to use them together with a TabView component. This is placed in the same page-view where you added the references from the first example.
<TabView>
<TabView.items>
<TabViewItem title="Tab 1" iconSource="res://tab1">
<TabViewItem.view>
<t1:tab1 />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Tab 2" iconSource="res://tab2" >
<TabViewItem.view>
<t2:tab2 />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Tab 3" iconSource="res://tab3" >
<TabViewItem.view>
<t3:tab3 />
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
Or, you could do it without the TabView, and create something custom:
<StackLayout>
<t1:tab1 id="tab1" visibility="visible" />
<t2:tab2 id="tab2" visibility="collapsed" />
<t3:tab3 id="tab3" visibility="collapsed" />
</StackLayout>
<SegmentedBar selectedIndex="0" selectedIndexChanged="segBarSelected">
<SegmentedBar.items>
<SegmentedBarItem title="Tab 1" />
<SegmentedBarItem title="Tab 2" />
<SegmentedBarItem title="Tab 3" />
</SegmentedBar.items>
</SegmentedBar>
So here would selectedIndexChangedcontrol the visibility of each partial view.
How to add some element in this menu (showned below)?
http://i.stack.imgur.com/UIaS5.png
I found how add element to toolbar menu and contex menu, but way to add something in this menu I could not find.
<!- Toolbar: -->
<menupopup id="menu_ToolsPopup">
<menuitem label="Test" oncommand="test.somefunction();"/>
</menupopup>
<!- Contex menu: -->
<popup id="contentAreaContextMenu">
<menuitem label="Test" oncommand="test.somefunction();"
insertafter="context-selectall"/>
</popup>
I found solution.
<popup id="placesContext">
<menuitem label="Test;" oncommand="test.somefunction();" />
</popup>
I installed DOM-inspector, to find solution. After it I investigated URL chrome://browser/content/browser.xul and went to #document -> #window -> popupset (mainPopupSet), where I by guess found needed element.
There is very good option "Copy XML" at DOM-inspector. It help me to find out what one or the other element to do.