This is my View Page
SecondView.view.xml
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:f="sap.ui.layout.form" xmlns:anubhav="myfiori.controls" xmlns:html="http://www.w3.org/1999/xhtml" controllerName="myfiori.controller.SecondView">
<Page title="My Second View" showNavButton="true" navButtonPress="onBack" content="{/ZPO_HEADERSet}">
<content>
<Table id="lineItemsList" width="auto" items="{toItems}">
<headerToolbar>
<Toolbar id="lineItemsToolbar">
<Title id="lineItemsHeader" />
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Text text="Doc No" />
</Column>
<Column >
<Text text="Material No"/>
</Column>
</columns>
<items>
<ColumnListItem >
<cells>
<Text text="{Ebelp}"/>
<Text text="{Matnr}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
My Item data path is "ZPO_HEADERSet('1100000001’)".so that I will get all the Items for the particular Header Id.
My controller
SecondView.controller.js
sPath = "/ZPO_HEADERSet('" + Id + "')";
this.getView().bindElement(sPath);
On pressing the Master Row, I should get it's items. But I'm getting all Item rows of every Header Id as shown in below screenshot.
This is because in your Page you are binding the whole entity set to the content aggregation.
Delete this content="{/ZPO_HEADERSet}" and try again.
The bindElement(sPath) function will prefix all your relative bindings with the 'sPath'
Related
I am trying to bind a popover to display the line item data based on what was clicked. I am working on a header and detail ODATA set. I am able to display the popover, just having an issue displaying the clicked value. Details below. Thank you in advance.
What I want to achieve: Display 100000 in the popover when clicked.
Popover Controller code:
viewDetails: function(oEvent) {
var oEve = oEvent.getSource();
var oCtx = oEvent.getSource().getParent().getBindingContext("mAggingData");
if (!this._oEditAddPopover) {
this._oEditAddPopover = sap.ui.xmlfragment("Viewcustomeroptions", "Z_AR_AGING.view.ViewCustomerOptions",
this);
}
this.getView().addDependent(this._oEditAddPopover);
this._oEditAddPopover.bindElement(oCtx.getPath().split('/')[2]);
this._oEditAddPopover.openBy(oEve);
},
Data Path:
rows="{ path:'mAggingData>/VendorDetails', hierarchyLevelFor : 'Heirarchy', parameters: {arrayNames:['categories']} }"
View.xml Code:
<Column width="8rem" id="id_level0" sortProperty="Customer" filterProperty="Customer" class="sortingProp">
<m:Label text="Customer" id="CustomerNum"/>
<template >
<m:Link id="customerDetails" text="{mAggingData>Customer}" wrapping="false" class="applyRowHighlight" press="viewDetails"/>
</template>
</Column>
View Customer Options Pop Over - {Customer} not outputting the data in the popover:
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Popover id="myPopover" title="{Customer}" class="sapUiPopupWithPadding" placement="Right" initialFocus="action">
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button id="action" text="View Customer Details" press="navToCustomer"/>
</Toolbar>
</footer>
</Popover>
</core:FragmentDefinition>
F12 Debugger Output of SPath
Update:
Binding from HeaderSet, but it still does not give the expected output from mAggingData > VendorDetails > categories:
Output
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Popover id="myPopover" title="{mAggingData>Customer}" class="sapUiPopupWithPadding" placement="Right" initialFocus="action">
<content>
<List id="listPopover" items = "{/CustHeadSet}">
<StandardListItem title="{Customer}"/>
</List>
</content>
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button id="action" text="View Customer Details" press="navToCustomer"/>
</Toolbar>
</footer>
</Popover>
</core:FragmentDefinition>
Prefix the binding in the popover with the model name (i.e. title="{mAggingData>Customer}").
I have my code below, basically to print out an image.
private async void imageControl_PrintButtonClick(object sender, RoutedEventArgs e)
{
var createBitmapTask = Task.Run(async () =>
{
var stream = await provider.OpenEntryAsRandomAccessStreamAsync(currentImageFile);
var decoder = await BitmapDecoder.CreateAsync(stream);
return await decoder.GetSoftwareBitmapAsync(
BitmapPixelFormat.Bgra8,
BitmapAlphaMode.Premultiplied);
});
var printHelper = new PrintHelper(printPanel);
printHelper.OnPreviewPagesCreated += PrintHelper_OnPreviewPagesCreated;
printPanel.Opacity = 1.0;
var source = new SoftwareBitmapSource();
var bitmap = await createBitmapTask;
await source.SetBitmapAsync(bitmap);
printImage.Source = source;
printFileName.Text = "Hello";
printImage.Height = bitmap.PixelHeight;
printImage.Width = bitmap.PixelWidth;
await printHelper.ShowPrintUIAsync("ZipPicView - " + currentImageFile.ExtractFilename(), true);
printPanel.Opacity = 0;
}
private void PrintHelper_OnPreviewPagesCreated(List<FrameworkElement> obj)
{
ContentDialog dialog = new ContentDialog();
}
However, the print preview shows an empty page. When I print it out, the printer does nothing.
I've tried changing the opacity of the printPanel (which is a Grid object) to non-zero, and the image does display on the screen. Still, the print has nothing on the output page.
I did notice that, on the OnPreviewPagesCreated, its obj parameter has a new object everytime it's called. The first call has one object with both Width and Height as NaN. My guess is because the container has no size, it cannot determine the content size.
Below is the XAML file.
<Page x:Name="page"
x:Class="ZipPicViewUWP.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ZipPicViewUWP"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors"
mc:Ignorable="d" KeyUp="page_KeyUp" Loaded="page_Loaded" SizeChanged="page_SizeChanged">
<Canvas x:Name="canvas" SizeChanged="canvas_SizeChanged">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Height="1019" Width="1920">
<Grid x:Name="printPanel" Opacity="0">
<StackPanel x:Name="printContent"
Margin="0,0"
Orientation="Vertical">
<TextBlock x:Name="printFileName" />
<Image x:Name="printImage"
Stretch="Fill" />
</StackPanel>
</Grid>
<SplitView x:Name="splitView" DisplayMode="CompactOverlay" PanePlacement="Left" CompactPaneLength="50" OpenPaneLength="300">
<SplitView.Content>
<GridView x:Name="thumbnailGrid" />
</SplitView.Content>
<SplitView.Pane>
<Grid Background="{StaticResource SidebarBackground}">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="0">
<Button x:Name="subFolderButton" Width="50" Height="50" Background="Transparent" Click="subFolderButton_Click">
<SymbolIcon Symbol="List" />
</Button>
<TextBlock VerticalAlignment="Center" Margin="0,15">Folders</TextBlock>
</StackPanel>
<ScrollViewer Grid.Row="1">
<ListView x:Name="subFolderListCtrl" SelectionChanged="subFolderList_SelectionChanged" DataFetchSize="2" Margin="-10,0,0,0" />
</ScrollViewer>
<ProgressRing x:Name="thumbProgress" Height="30" Width="30" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="2" Margin="10,0,0,10" />
</Grid>
</SplitView.Pane>
</SplitView>
<interactivity:Interaction.Behaviors>
<behaviors:Blur x:Name="BlurBehavior" Duration="500" AutomaticallyStart="False" />
</interactivity:Interaction.Behaviors>
</Grid>
<Border x:Name="imageBorder" Visibility="Collapsed">
<Image x:Name="image" ManipulationMode="TranslateX" ManipulationCompleted="image_ManipulationCompleted" Tapped="image_Tapped">
<interactivity:Interaction.Behaviors>
<behaviors:Blur x:Name="ImageTransitionBehavior" Duration="500" AutomaticallyStart="False" />
</interactivity:Interaction.Behaviors>
</Image>
</Border>
<local:ViewerControl x:Name="imageControl" Visibility="Collapsed" CloseButtonClick="imageControl_CloseButtonClick" NextButtonClick="imageControl_NextButtonClick" PrevButtonClick="imageControl_PrevButtonClick" SaveButtonClick="imageControl_SaveButtonClick" PrintButtonClick="imageControl_PrintButtonClick" />
<Border x:Name="loadingBorder" Visibility="Collapsed">
<ProgressRing IsActive="True" Width="100" Height="100" />
</Border>
</Canvas>
<Page.TopAppBar>
<CommandBar VerticalContentAlignment="Center" VerticalAlignment="Center">
<CommandBar.Content>
<TextBlock Margin="10,0,0,0" x:Name="filenameTextBlock" Text="<None>" UseLayoutRounding="True" />
</CommandBar.Content>
<AppBarToggleButton x:Name="fullscreenButton" Icon="FullScreen" Label="FullScreen" Checked="fullscreenButton_Checked" Unchecked="fullscreenButton_Unchecked" />
<AppBarSeparator />
<AppBarButton x:Name="openFileButton" Icon="OpenFile" Label="Open File" Click="openFileButton_Click" />
<AppBarButton x:Name="openFolderButton" Icon="Folder" Label="Open Folder" Click="openFolderButton_Click" />
</CommandBar>
</Page.TopAppBar>
</Page>
And the source code is here : https://github.com/wutipong/ZipPicViewCS/tree/master/ZipPicViewUWP
Using the publicly available Nortwhind oData v2 service I can expand on Product and Supplier entity in a normal sap.m.Table using the following code:
<Table
id="table"
width="auto"
class="sapUiResponsiveMargin"
items="{
path: '/Products',
parameters : { expand: 'Supplier' }
}">
<columns>
<Column id="nameColumn">
<Text
text="{i18n>tableNameColumnTitle}"
id="nameColumnTitle" />
</Column>
<Column hAlign="End">
<Text text="test" />
</Column>
</columns>
<items>
<ColumnListItem
type="Navigation"
press="onPress">
<cells>
<ObjectIdentifier title="{ProductName}"/>
<Text text="{Supplier/CompanyName}"/>
</cells>
</ColumnListItem>
</items>
</Table>
Now how can I achieve the same output using a smart table? Based on this post I tried the following:
<sap.ui.comp.smarttable:SmartTable
xmlns:sap.ui.comp.smarttable="sap.ui.comp.smarttable"
tableType="ResponsiveTable"
header="Smart Table"
enableAutoBinding="true"
entitySet="Products"
initiallyVisibleFields="ProductName"
tableBindingPath="Supplier"/>
But it is not working. Any suggestions?
I have moved a step further. I have added the following code:
onBeforeRebind: function(oEvent) { var mBindingParams = oEvent.getParameter("bindingParams");
mBindingParams.parameters["expand"] = "Supplier"; },
well that's it for how using $expand on Smarttables
Is there any way to display columns from the other entity?
Only via NavigationProperty. You need to extend your smarttable columns like mentioned bellow:
<smartTable:SmartTable
entitySet="Products"
tableType="ResponsiveTable"
header="Products" showRowCount="true"
enableAutoBinding="true"
class="sapUiResponsiveContentPadding">
<Table>
<columns>
<Column width="100px" hAlign="Left">
<customData>
<core:CustomData key="p13nData"
value='\{"columnKey": "p13nDataKey", "columnIndex":"4", "leadingProperty": "Supplier"}' />
</customData>
<Text text="{/#Supplier/Name/#sap:label}" />
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text
text="{Supplier/Name}" />
</cells>
</ColumnListItem>
</items>
</Table>
</smartTable:SmartTable>
I have moved a step further. I have added the following code:
onBeforeRebind: function(oEvent) {
var mBindingParams = oEvent.getParameter("bindingParams");
mBindingParams.parameters["expand"] = "Supplier";
},
which kicks on beforeRebindTable event. It triggers the get expanded entity set in the backend. The problem is that I still can only see columns from the first entity as it is specified in the entitySet parameter. Is there any way to display columns from the other entity?
I am having a toolbar-button with type "menu-button". Can I have two toolbar-buttons inside this one?
Since you would like to have a button inside a menu-button, here you go. But, this is not a pretty good UI.
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<window id="main-window">
<toolbox id="navigator-toolbox">
<toolbar id="xulschoolhello-toolbar" toolbarname="xulschoolhello.toolbarName.label;"
customizable="true" mode="icons" context="toolbar-context-menu"
defaultset="xulschoolhello-hello-world-button"
insertbefore="PersonalToolbar" />
<hbox>
<row> <button flex="1" type="menu" label="Menu">
<menupopup>
<menuitem label="Option 1" oncommand="setText('menu-text','Option 1');" />
<menuitem label="Option 2" oncommand="setText('menu-text','Option 2');" />
<menuitem label="Option 3" oncommand="setText('menu-text','Option 3');" />
<menuitem label="Option 4" oncommand="setText('menu-text','Option 4');" />
</menupopup>
</button> </row>
<row> <button flex="1" type="menu-button" label="MenuButton" oncommand="alert('Button was pressed!');">
<menupopup>
<menuitem label="Option A" oncommand="setText('menu-text','Option A');" />
<menuitem label="Option B" oncommand="setText('menu-text','Option B');" />
<menuitem label="Option C" oncommand="setText('menu-text','Option C');" />
<menuitem label="Option D" oncommand="setText('menu-text','Option D');" />
</menupopup>
</button></row>
</hbox>
<hbox pack="center">
<description id="menu-text" value="Testing" />
</hbox>
</toolbox>
</window>
</window>
My Struts2 application needs the pagination functionality applied to some records, but what I need to customize is the "Last 1 - 2 - 3 Next" appearance and also have the ability to use a combo box for the selection of how many records should be visible(10 - 20 - 30 - 40 -50).
I have tried two way to accomplish this goal:
1) use display tag library, but I'm not able to customize the appearance, because is auto-generated by the library, and I don't how implement the combo box for select how many records should be visible
2) create my own code for accomplish this functionality but is a job too long and not enough time due to the expiry.
My question is: exists some Struts2 library for realize this functionality? Or, is possible to customize the display tag library for the page scroll bar and the records combo box?
I can give insight from struts2 code base there is no functionality as described by you provided by struts2 in itself..
Regarding the Display tag i have not used them much but since they are the part of oprn source i am sure we can customize that one more thing regarding the customization of display tag ask question under display tag you will get better answer at at quick pace
I wrote a custom tld just for the purpose as below and then just use it like this:
Usage:
paginate.tag
1}">
<c:set var="showingPage"
value="${param.pageNumber == null ? 1 : param.pageNumber}" />
<c:url value="${postUrl}" var="previousUrl">
<c:param name="pageNumber" value="${showingPage - 1}" />
<c:param name="perPage" value="${perPage}" />
</c:url>
<c:url value="${postUrl}" var="nextUrl">
<c:param name="pageNumber" value="${showingPage +1}" />
<c:param name="perPage" value="${perPage}" />
</c:url>
<div class="pagination" />
<c:if test="${showingPage > 1}">
<< Previous
</c:if>
<fmt:formatNumber var="endCounter" pattern="0">
<%= totalCount % perPage > 0 ? Math.ceil(totalCount/perPage) + 1 : totalCount/perPage %>
</fmt:formatNumber>
<c:forEach begin="1" end="${endCounter}" var="index">
<c:url value="${postUrl}" var="url">
<c:param name="pageNumber" value="${index}" />
<c:param name="perPage" value="${perPage}" />
</c:url>
${index}
</c:forEach>
<c:if test="${endCounter != showingPage}">
Next >>
</c:if>
</div>
</c:if>
hi you can try struts2 jquery grid here is the code
<%# page contentType="text/html; charset=UTF-8"%>
<%# taglib prefix="s" uri="/struts-tags"%>
<%# taglib prefix="sj" uri="/struts-jquery-tags"%>
<%# taglib prefix="sjg" uri="/struts-jquery-grid-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<sj:div id="resultsDiv">
<body>
<div id="mainframe">
<s:form>
<div id="sucessMsg">
<s:property value="msg" />
</div>
<s:url id="editurl" action="editUser" />
<s:url id="deleteurl" action="deleteUser" />
<script type="text/javascript">
function editLinkFormatter(cellval, options, rowObject, icon, link_class, link_action) {
//alert(rowObject.username);
return "<a href='#' onClick='javascript:openEditDialog(""+cellval+"",""+rowObject.username+"")'><font class='hyperlink'><u>" + rowObject.username + "</u></font></a>";
}
function deleteLinkFormatter(cellval, options, rowObject, icon, link_class, link_action) {
return "<a href='deleteUser?userid="+cellval+"' onClick='javascript: return delete_user()'><font class='hyperlink'><u>Delete</u></font></a>";
//return "Delete";
}
colModal: [
{name: 'userid', formatter: function (cellvalue, options, rowObject) {
return editLinkFormatter(cellvalue, options, rowObject,
'ui-icon-pencil', 'edit-link-class', 'Edit');
}},
{name: 'userid', formatter: function (cellvalue, options, rowObject) {
return deleteLinkFormatter(cellvalue, options, rowObject, icon, link_class, link_action);
}}
];
function openEditDialog(userid,username) {
$("#resultsDiv").load("<s:property value="editurl"/>?userid="+userid+"&username="+username);
}
function delete_user() {
var agree=confirm("Are you sure you want to Delete?");
if (agree){
return true;
}
else{
return false;
}
// $("#edit_Users").dialog('open');
}
function unlockerFormatter(cellval, options, rowObject, icon, link_class, link_action) {
if(rowObject.loginStatus=='Locked'){
return "<a href='unlockuser?userid=" + rowObject.userid + "')'><font class='hyperlink'><u>Locked</u></font></a>";
}
else{
return "UnLocked";
}
/* return "<a href='deleteUser?userid="+cellval+"' onClick='javascript: return deleteUser("+cellval+")'><u>Delete</u></a>"; */
//return "Delete";
}
</script>
<sj:dialog id="edit_Users" title="Edit User" autoOpen="false"
modal="true" width="800" />
<sj:div id="draggable" draggable="true">
<s:url id="remoteurl" action="viewUserstemp" />
<sjg:grid id="gridtable" caption="Users" dataType="json"
href="%{remoteurl}" pager="true" gridModel="gridModel"
rowList="10,15,20,50,100" rowNum="10" rownumbers="true" viewrecords="true"
width="800" navigator="true" navigatorView="false" navigatorDelete="false" navigatorAdd="false" navigatorEdit="false" navigatorSearch="false">
<sjg:gridColumn name="userid" index="userid" title="User Id"
sortable="false" />
<sjg:gridColumn name="userid" index="username" title="User Name"
sortable="true" formatter="editLinkFormatter" />
<sjg:gridColumn name="emailid" index="emailid" title="Email Id"
sortable="true" />
<sjg:gridColumn name="userCreatedDate" index="userCreatedDate"
title="Created Date" sortable="true" />
<sjg:gridColumn name="userModifiedDate" index="userModifiedDate"
title="Modified Date" sortable="true" />
<sjg:gridColumn name="accstatus" index="accstatus"
title="Account Status" sortable="true" />
<sjg:gridColumn name="userid" index="username" title="Delete User"
sortable="true" formatter="deleteLinkFormatter" />
<sjg:gridColumn name="loginStatus" index="loginStatus" title="Unlock User"
sortable="true" formatter="unlockerFormatter" />
</sjg:grid>
<br></br>
<s:submit action="loadUserValues" cssClass="ui-button ui-widget ui-state-default ui-corner-all ui-state-hover" name="button"
id="button" value="New User" />
<br />
</sj:div>
</s:form>
<%--
<td height="25" align="left" valign="middle">
<s:url id="url" action="unlockuser">
<s:param name="userid">
<s:property value="userid" />
</s:param>
</s:url>
<s:set name="type" value="%{loginStatus}" />
<s:if test="%{#type=='Locked'}">
<s:a href="%{url}" title="Click here to Unlock" ><s:property value="loginStatus"/></s:a>
</s:if>
<s:else>
Unlocked
</s:else> --%>
</td>
</div>
</body>
</sj:div>
</html>