Sapui5 column adjusting - html

this is how my view file looks like:
<mvc:View
controllerName="abc"
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:form="sap.ui.layout.form"
xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
xmlns:core="sap.ui.core">
<App>
<pages>
<Page title="APP_TITLE" showHeader="false">
<content>
<Table id="configTable" mode="None" items="{ path : '/'}">
<columns>
<Column id="bname">
<Text text="BOOKING_NAME"></Text>
</Column>
<Column> <Button icon="sap-icon://message-information" text="Info" type="Emphasized" press="handleMessagePopoverPress"/>
</Column>
<Column hAlign="Right" id="addItem" width="2em"></Column>
</columns>
</Table>
</content>
<footer>
<Toolbar class="sapContrast sapContrastPlus" width="100%">
</Toolbar>
</footer>
</Page>
</pages>
</App>
which will produce the following UI:
as you can see that button just destroys the whole column, there is a lot of space under BOOKING_NAME how can I adjust the size of the button to the column so it doesn't scratch everything? if that's not possible how can I align the text to the center of the column, I tried vAlign="Middle" but nothing changed..... I don't find anything in the sapui5 doc

actually just solved this by adding another column in that layout and instead of using an button and icon I just implemented the icon
<mvc:View
controllerName="local.controller"
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:form="sap.ui.layout.form"
xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
xmlns:c="sap.ui.core">
and between the colum the following:
<c:Icon src="sap-icon://message-information" size="1em" id="infoDefaultCurrency" press="onInfoButtonPressed" />

Simple workaround will be using css.You can use sapui5 predefined margin class for this.
jQuery.sap.require("sap.m.MessageToast");
sap.ui.controller("local.controller", {
doSomething: function() {
sap.m.MessageToast.show("Hello UI5 World");
}
});
var oModel = new sap.ui.model.json.JSONModel({
people: [{
name: 'Joseph',
number: 1.618
},
{
name: 'DJ',
number: 0
}
]
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#view1').html()
});
oView.setModel(oModel);
oView.placeAt('content');
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8">
<title>MVC with XmlView</title>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
<script id="view1" type="sapui5/xmlview">
<mvc:View controllerName="local.controller" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<App>
<pages>
<Page title="APP_TITLE" showHeader="false">
<content>
<Table id="configTable" mode="None" items="/people">
<columns>
<Column id="bname">
<Text text="BOOKING_NAME" class="sapUiSmallMarginTop"></Text>
</Column>
<Column>
<Button icon="sap-icon://message-information" text="Info" type="Emphasized" press="handleMessagePopoverPress" />
</Column>
<Column hAlign="Right" id="addItem" width="2em"></Column>
</columns>
</Table>
</content>
<footer>
<Toolbar class="sapContrast sapContrastPlus" width="100%">
</Toolbar>
</footer>
</Page>
</pages>
</App>
</mvc:View>
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
I have used sapUiSmallMarginTop in the sample

Related

SAPUI5 Responsive table multi select set selected records

I have a SAPUI5 responsive table with multi-select mode. And I need to show the selected records when loading data to the table. Couldn't find a way to set selected records in the responsive table.
<Table id="idProductsTable"
inset="false"
mode="MultiSelect"
alternateRowColors="true"
items="{
path: '/ProductCollection',
sorter: {
path: 'Name'
}
}">
<headerToolbar>
<OverflowToolbar>
<Title text="Products" level="H2"/>
<ToolbarSpacer/>
<Label text="Multi selection modes" labelFor="idComboBoxSuccess"></Label>
<ComboBox id="idComboBoxSuccess" selectedKey="Default" selectionChange=".onSelectionChange">
<core:Item text="Default" key="Default"></core:Item>
<core:Item text="ClearAll" key="ClearAll"></core:Item>
</ComboBox>
</OverflowToolbar>
</headerToolbar>
<columns>
<Column width="12em">
<Text text="Product" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Supplier" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="End">
<Text text="Dimensions" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier
title="{Name}"
text="{ProductId}"/>
<Text
text="{SupplierName}" />
<Text
text="{Width} x {Depth} x {Height} {DimUnit}" />
</cells>
</ColumnListItem>
</items>
</Table>
Is there a way to set the selected rows in the table and display selected records.
You can use selected property in ColumnListItem.
<ColumnListItem selected="{YourSelectedBoolean}">
<cells>
<ObjectIdentifier title="{Name}" text="{ProductId}"/>
<Text text="{SupplierName}" />
<Text text="{Width} x {Depth} x {Height} {DimUnit}" />
</cells>
</ColumnListItem>
Fiddle

Making the objectheader sticky and rest of the page scrollable

I have a page with an ObjectHeader and 4 panels. All the panels have a table with a horizontal scrollbar. I want to freeze the object header at the top whenever the page is scrolled. I tried the sticky property but it is not applicable for ObjectHeader but it is applicable to IconTab Bar. But in my case, I can't use IconTab Bar. I also tried some CSS but failed Please help. Below is my XML code.
XML Code :
<mvc:View xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns:t="sap.ui.table" xmlns="sap.m"
controllerName="sap.hmel.pymt.adv.controller.PaymentAdviceApp" displayBlock="true">
<App>
<pages>
<Page showHeader="false" showNavButton="true" navButtonPress="onCallPayAdvice">
<ObjectHeader title="" fullScreenOptimized="true" >
<attributes>
<ObjectAttribute title="Total Credit Values" text="+ ₹ {credModel>/header/TotalCreditItem}"/>
<ObjectAttribute title="Total Debit Values" text="- ₹ {credModel>/header/TotalDebitItem}"/>
<ObjectAttribute title="Balance" text=" ₹ {credModel>/header/TotalBalance}"/>
</attributes>
<statuses>
<ObjectStatus title="Selected Credit Values" text="+ ₹ {detail>/crdTotal}" state="{detail>/utrState}"/>
<ObjectStatus title="Selected Debit Values" text="- ₹ {detail>/invTotal}" state="{detail>/totalState}"/>
<ObjectStatus title="Balance" text=" ₹ {detail>/balance} {detail>/Waers}" state="{detail>/balState}"/>
</statuses>
</ObjectHeader>
<Panel expandable="true" headerText="Payment Document ( Subtotal : + ₹ {credModel>/header/PaymentSum})" class="sapUiMediumMarginBegin"
id="paymentPanel">
<ScrollContainer vertical="true">
<Table class="sapUiLargeMarginBottom" items="{credModel>/Payment}" growingThreshold="5" fixedLayout="false" id="paymentDocument"
growing="true" growingScrollToLoad="true" inset="false" mode="MultiSelect" selectionChange="onRowSelectionChangePayment">
<columns>
</columns>
<items>
<ColumnListItem id="columnTempId">
<cells>
</cells>
</ColumnListItem>
</items>
</Table>
</ScrollContainer>
</Panel>
<Panel expandable="true" headerText="Credit Note (Subtotal : + ₹ {credModel>/header/CreditSum})" class="sapUiMediumMarginBegin">
<ScrollContainer vertical="true">
<Table sticky="HeaderToolbar,ColumnHeaders" class="sapUiLargeMarginBottom" items="{credModel>/Credit}" id="creditNote" growing="true"
growingScrollToLoad="true" growingThreshold="5" mode="MultiSelect" selectionChange="onRowSelectionChangeCredit">
<columns>
</columns>
<items>
<ColumnListItem id="column">
<cells>
</cells>
</ColumnListItem>
</items>
</Table>
</ScrollContainer>
</Panel>
<Panel expandable="true" headerText="Invoice (Subtotal : - ₹ {credModel>/header/InvoiceSum})" class="sapUiMediumMarginBegin">
<ScrollContainer vertical="true">
<Table class="sapUiLargeMarginBottom" items="{credModel>/Invoice}" fixedLayout="false" id="invoice" growingThreshold="5" growing="true"
growingScrollToLoad="true" inset="false" mode="MultiSelect" selectionChange="onRowSelectionChange">
<columns>
</columns>
<items>
<ColumnListItem id="columnTemp">
<cells>
</cells>
</ColumnListItem>
</items>
</Table>
</ScrollContainer>
</Panel>
<Panel expandable="true" headerText="Debit Note (Subtotal : - ₹ {credModel>/header/DebitSum})" class="sapUiMediumMarginBegin">
<ScrollContainer vertical="true">
<Table class="sapUiLargeMarginBottom" items="{credModel>/Debit}" growingThreshold="5" fixedLayout="false" id="debitNote" growing="true"
growingScrollToLoad="true" inset="false" mode="MultiSelect" selectionChange="onRowSelectionChangeDebit">
<columns>
</columns>
<items>
<ColumnListItem id="columnId">
<cells>
</cells>
</ColumnListItem>
</items>
</Table>
</ScrollContainer>
</Panel>
<footer>
<Bar>
<contentRight>
<Button text="Create" type="Accept" id="btnCreateId" press="onCreate"/>
<Button text="Cancel" type="Reject" icon="sap-icon://decline" press="onCancel"/></contentRight>
</Bar>
</footer>
</Page>
</pages>
</App>

How to provide Id or Attribute to the react components

We need to provide some identifier for our react components so that we can do the automation test case writing on those controls.
import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column } from '#progress/kendo-react-grid';
import products from './products.json';
class App extends React.Component {
state = {
gridData: products
}
render() {
return (
<div>
<Grid
data-grid="myGrid"
style={{ height: '400px' }}
data={this.state.gridData}
>
<Column field="ProductID" title="ID" width="40px" />
<Column field="ProductName" title="Name" width="200px" />
<Column field="Category.CategoryName" title="CategoryName" />
<Column field="UnitPrice" title="Price" width="80px" />
<Column field="UnitsInStock" title="In stock" width="80px" />
<Column field="Discontinued" width="120px"
cell={(props) => (
<td>
<input disabled type="checkbox" checked={props.dataItem[props.field]} />
</td>
)} />
</Grid>
</div>
);
}
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
);
We have tried to provide data-grid="myGrid" attribute to the grid but that doesn't seems to work. Could you please suggest what is the mistake here or what will be the solution.
You should pass prop using camelCase so it should be like this:
<Grid dataGrid="myGrid" />
And inside Grid you can specify it like this:
const Grid = ({dataGrid}) => (
<div data-grid={dataGrid} />
)
Or you can just set id to the component <Grid id="myGrid" />

Use google maps javascript api on my cordova project

I want to use google maps javascript api on my cordova project. I noticed by a lot of search to need to implement white list policy in config.xml. But I can't understand what to implement in config.xml. Please help. Followings are my codes and trial result.
---config.xml---
<?xml version='1.0' encoding='utf-8'?>
<widget id="net.thinctank.onmap" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Map</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="https://maps.googleapis.com/maps/api/js?key=MYKEY" />
<allow-navigation href="https://maps.googleapis.com/maps/api/js?key=MYKEY" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>
---index.html---
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
---index.js---
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
onDeviceReady: function() {
this.receivedEvent('deviceready');
},
receivedEvent: function(id) {
console.log('Received Event: ' + id);
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
}
};
app.initialize();
I tried to execute by "cordova serve android" command but i got the error↓
"Refused to load the script 'https://maps.googleapis.com/maps/api/js?key=MYKEY' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback."

Create a Custom Tab

When I start a new Excel Web Add-in, by default the blank project has a MyAppName.xml file that declares the ribbon.
The declaration sets a custom group and a custom control under the native Home Excel tab.
What I want is to create a separate tab for my Addin.
In the file project itself, there are these code lines:
<!-- Use OfficeTab to extend an existing Tab. Use CustomTab to create a new tab. -->
<OfficeTab id="TabHome">
So I changed OfficeTab for CustomTab, but now I get the message in the error list:
The element 'CustomTab' in namespace 'http://schemas.microsoft.com/office/taskpaneappversionoverrides' has incomplete content. List of possible elements expected: 'Group, Label' in namespace 'http://schemas.microsoft.com/office/taskpaneappversionoverrides'.
Do you know how I can create a custom tab? What am I doing wrong?
I'm using:
Microsoft Visual Studio Enterprise 2017
Version 15.2 (26430.12) Release
VisualStudio.15.Release/15.2.0+26430.12
Thanks.
Below is an example manifest that uses CustomTab. Can you compare your's with the example and see what might be different? Are you giving the CustomTab a unique ID? Does it have Group and Label child elements?
<?xml version="1.0" encoding="utf-8"?>
<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:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="TaskPaneApp">
<!-- See https://github.com/OfficeDev/Office-Add-in-Commands-Samples for documentation-->
<!-- BeginBasicSettings: Add-in metadata, used for all versions of Office unless override provided -->
<!--IMPORTANT! Id must be unique for your add-in. If you copy this manifest ensure that you change this id to your own GUID. -->
<Id>e504fb41-a92a-4526-b101-542f357b7acb</Id>
<Version>1.0.0.0</Version>
<ProviderName>Contoso</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<!-- The display name of your add-in. Used on the store and various placed of the Office UI such as the add-ins dialog -->
<DisplayName DefaultValue="Add-in Commands Sample" />
<Description DefaultValue="Sample that illustrates add-in commands basic control types and actions" />
<!--Icon for your add-in. Used on installation screens and the add-ins dialog -->
<IconUrl DefaultValue="https://contoso.com/assets/icon-32.png" />
<HighResolutionIconUrl DefaultValue="https://contoso.com/assets/hi-res-icon.png" />
<SupportUrl DefaultValue="[Insert the URL of a page that provides support information for the app]" />
<!--BeginTaskpaneMode integration. Office 2013 and any client that doesn't understand commands will use this section.
This section will also be used if there are no VersionOverrides -->
<Hosts>
<Host Name="Document"/>
</Hosts>
<DefaultSettings>
<SourceLocation DefaultValue="https://commandsimple.azurewebsites.net/Taskpane.html" />
</DefaultSettings>
<!--EndTaskpaneMode integration -->
<Permissions>ReadWriteDocument</Permissions>
<!--BeginAddinCommandsMode integration-->
<VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
<Hosts>
<!--Each host can have a different set of commands. Cool huh!? -->
<!-- Workbook=Excel Document=Word Presentation=PowerPoint -->
<!-- Make sure the hosts you override match the hosts declared in the top section of the manifest -->
<Host xsi:type="Document">
<!-- Form factor. Currently only DesktopFormFactor is supported. We will add TabletFormFactor and PhoneFormFactor in the future-->
<DesktopFormFactor>
<!--Function file is an html page that includes the javascript where functions for ExecuteAction will be called.
Think of the FunctionFile as the "code behind" ExecuteFunction-->
<FunctionFile resid="Contoso.FunctionFile.Url" />
<!--PrimaryCommandSurface==Main Office app ribbon-->
<ExtensionPoint xsi:type="PrimaryCommandSurface">
<!--Use OfficeTab to extend an existing Tab. Use CustomTab to create a new tab -->
<!-- Documentation includes all the IDs currently tested to work -->
<CustomTab id="Contoso.Tab1">
<!--Group ID-->
<Group id="Contoso.Tab1.Group1">
<!--Label for your group. resid must point to a ShortString resource -->
<Label resid="Contoso.Tab1.GroupLabel" />
<Icon>
<!-- Sample Todo: Each size needs its own icon resource or it will look distorted when resized -->
<!--Icons. Required sizes: 16, 32, 80; optional: 20, 24, 40, 48, 64. You should provide as many sizes as possible for a great user experience. -->
<!--Use PNG icons and remember that all URLs on the resources section must use HTTPS -->
<bt:Image size="16" resid="Contoso.TaskpaneButton.Icon16" />
<bt:Image size="32" resid="Contoso.TaskpaneButton.Icon32" />
<bt:Image size="80" resid="Contoso.TaskpaneButton.Icon80" />
</Icon>
<!--Control. It can be of type "Button" or "Menu" -->
<Control xsi:type="Button" id="Contoso.FunctionButton">
<!--Label for your button. resid must point to a ShortString resource -->
<Label resid="Contoso.FunctionButton.Label" />
<Supertip>
<!--ToolTip title. resid must point to a ShortString resource -->
<Title resid="Contoso.FunctionButton.Label" />
<!--ToolTip description. resid must point to a LongString resource -->
<Description resid="Contoso.FunctionButton.Tooltip" />
</Supertip>
<Icon>
<bt:Image size="16" resid="Contoso.FunctionButton.Icon16" />
<bt:Image size="32" resid="Contoso.FunctionButton.Icon32" />
<bt:Image size="80" resid="Contoso.FunctionButton.Icon80" />
</Icon>
<!--This is what happens when the command is triggered (E.g. click on the Ribbon). Supported actions are ExecuteFunction or ShowTaskpane-->
<!--Look at the FunctionFile.html page for reference on how to implement the function -->
<Action xsi:type="ExecuteFunction">
<!--Name of the function to call. This function needs to exist in the global DOM namespace of the function file-->
<FunctionName>writeText</FunctionName>
</Action>
</Control>
<Control xsi:type="Button" id="Contoso.TaskpaneButton">
<Label resid="Contoso.TaskpaneButton.Label" />
<Supertip>
<Title resid="Contoso.TaskpaneButton.Label" />
<Description resid="Contoso.TaskpaneButton.Tooltip" />
</Supertip>
<Icon>
<bt:Image size="16" resid="Contoso.TaskpaneButton.Icon16" />
<bt:Image size="32" resid="Contoso.TaskpaneButton.Icon32" />
<bt:Image size="80" resid="Contoso.TaskpaneButton.Icon80" />
</Icon>
<Action xsi:type="ShowTaskpane">
<TaskpaneId>Button2Id1</TaskpaneId>
<!--Provide a url resource id for the location that will be displayed on the task pane -->
<SourceLocation resid="Contoso.Taskpane1.Url" />
</Action>
</Control>
<!-- Menu example -->
<Control xsi:type="Menu" id="Contoso.Menu">
<Label resid="Contoso.Dropdown.Label" />
<Supertip>
<Title resid="Contoso.Dropdown.Label" />
<Description resid="Contoso.Dropdown.Tooltip" />
</Supertip>
<Icon>
<bt:Image size="16" resid="Contoso.TaskpaneButton.Icon16" />
<bt:Image size="32" resid="Contoso.TaskpaneButton.Icon32" />
<bt:Image size="80" resid="Contoso.TaskpaneButton.Icon80" />
</Icon>
<Items>
<Item id="Contoso.Menu.Item1">
<Label resid="Contoso.Item1.Label"/>
<Supertip>
<Title resid="Contoso.Item1.Label" />
<Description resid="Contoso.Item1.Tooltip" />
</Supertip>
<Icon>
<bt:Image size="16" resid="Contoso.TaskpaneButton.Icon16" />
<bt:Image size="32" resid="Contoso.TaskpaneButton.Icon32" />
<bt:Image size="80" resid="Contoso.TaskpaneButton.Icon80" />
</Icon>
<Action xsi:type="ShowTaskpane">
<TaskpaneId>MyTaskPaneID1</TaskpaneId>
<SourceLocation resid="Contoso.Taskpane1.Url" />
</Action>
</Item>
<Item id="Contoso.Menu.Item2">
<Label resid="Contoso.Item2.Label"/>
<Supertip>
<Title resid="Contoso.Item2.Label" />
<Description resid="Contoso.Item2.Tooltip" />
</Supertip>
<Icon>
<bt:Image size="16" resid="Contoso.TaskpaneButton.Icon16" />
<bt:Image size="32" resid="Contoso.TaskpaneButton.Icon32" />
<bt:Image size="80" resid="Contoso.TaskpaneButton.Icon80" />
</Icon>
<Action xsi:type="ShowTaskpane">
<TaskpaneId>MyTaskPaneID2</TaskpaneId>
<SourceLocation resid="Contoso.Taskpane2.Url" />
</Action>
</Item>
</Items>
</Control>
</Group>
<!-- Label of your tab -->
<!-- If validating with XSD it needs to be at the end -->
<Label resid="Contoso.Tab1.TabLabel" />
</CustomTab>
</ExtensionPoint>
</DesktopFormFactor>
</Host>
</Hosts>
<Resources>
<bt:Images>
<bt:Image id="Contoso.TaskpaneButton.Icon16" DefaultValue="https://myCDN/Images/Button16x16.png" />
<bt:Image id="Contoso.TaskpaneButton.Icon32" DefaultValue="https://myCDN/Images/Button32x32.png" />
<bt:Image id="Contoso.TaskpaneButton.Icon80" DefaultValue="https://myCDN/Images/Button80x80.png" />
<bt:Image id="Contoso.FunctionButton.Icon" DefaultValue="https://myCDN/Images/ButtonFunction.png" />
</bt:Images>
<bt:Urls>
<bt:Url id="Contoso.FunctionFile.Url" DefaultValue="https://commandsimple.azurewebsites.net/FunctionFile.html" />
<bt:Url id="Contoso.Taskpane1.Url" DefaultValue="https://commandsimple.azurewebsites.net/Taskpane.html" />
<bt:Url id="Contoso.Taskpane2.Url" DefaultValue="https://commandsimple.azurewebsites.net/Taskpane2.html" />
</bt:Urls>
<bt:ShortStrings>
<bt:String id="Contoso.FunctionButton.Label" DefaultValue="Execute Function" />
<bt:String id="Contoso.TaskpaneButton.Label" DefaultValue="Show Taskpane" />
<bt:String id="Contoso.Dropdown.Label" DefaultValue="Dropdown" />
<bt:String id="Contoso.Item1.Label" DefaultValue="Show Taskpane 1" />
<bt:String id="Contoso.Item2.Label" DefaultValue="Show Taskpane 2" />
<bt:String id="Contoso.Tab1.GroupLabel" DefaultValue="Test Group" />
<bt:String id="Contoso.Tab1.TabLabel" DefaultValue="Test Tab" />
</bt:ShortStrings>
<bt:LongStrings>
<bt:String id="Contoso.FunctionButton.Tooltip" DefaultValue="Click to Execute Function" />
<bt:String id="Contoso.TaskpaneButton.Tooltip" DefaultValue="Click to Show a Taskpane" />
<bt:String id="Contoso.Dropdown.Tooltip" DefaultValue="Click to Show Options on this Menu" />
<bt:String id="Contoso.Item1.Tooltip" DefaultValue="Click to Show Taskpane1" />
<bt:String id="Contoso.Item2.Tooltip" DefaultValue="Click to Show Taskpane2" />
</bt:LongStrings>
</Resources>
</VersionOverrides>
</OfficeApp>
See also this article and the samples it links to. And check out Validate and Troubleshoot your Manifest too.