I wanted to pass the value to filter option in run-time. Below is the code, I just tried and it is not working. can anyone please tell me that, how can I achieve this option ?
<l:VerticalLayout width="100%" id="idRENT_CAR_DET"
content="{path:'/Trip_section/Rental_det',
filters : { path : 'TripId',
operator :'EQ',
value1: '{ path :'Trip_section>/TripId'}' } }" >
<l:Grid defaultSpan="L2 M6 S6" minWidth="1024">
<m:Input value="{From}" type="Date"/>
<m:Input value="{To}" type="Date" />
<m:HBox>
<m:Button id="idRCBTN" icon="sap-icon://sys-add"/>
<m:Button icon="sap-icon://sys-cancel" />
</m:HBox> </l:Grid> </l:VerticalLayout>
I haven't ran your code but your xml formatting is wrong.
You must use different characters for '
'{ path :'Trip_section>/TripId'}'
Maybe it would be the best if you apply the filter to your view in your controller.
var aFilter = [];
var sQuery = oEvent.getParameter("query");
if (sQuery) {
aFilter.push(new Filter("ProductName", FilterOperator.Contains, sQuery));
}
var oVerticalLayout = this.getView().byId("theGivenId...");
var oBinding = oVerticalLayout.getBinding("content");
oBinding.filter(aFilter);
Maybe the binding isn't available in the onInit function.
I wish you good luck.
Related
When I add a SimplePlanningCalendar to my app, I got the following Error.
I added the calendar with a minimal configuration to my app.
<IconTabBar xmlns="sap.m"
id="idCategoryMenu"
selectedKey="Home"
headerMode="Inline"
stretchContentHeight="true"
applyContentPadding="false"
select=".onSelectCategory"
items="{
path: 'backend>/CategorySet',
parameters: {
expand: 'Reports'
},
sorter: {
path: 'Sort'
},
templateShareable: true
}">
<items>
<IconTabFilter id="myIconTabFilter" key="{backend>Uuid}" text="{backend>Name}">
<!-- ... -->
<SinglePlanningCalendar>
<appointments>
<unified:CalendarAppointment xmlns:unified="sap.ui.unified"
title="{title}"
startDate="{startDate}"
endDate="{endDate}"
/>
</appointments>
</SinglePlanningCalendar>
<!-- ... -->
</IconTabFilter>
</items>
</IconTabBar>
When I debug the app, I come to the following line inside the SinglePlanningCalendar.js where a key from the given vView parameter is requested, but the parameter only holds a string.
Anyone else had this problem before and knows why or how to solve this?
The problem is caused by the control implementation itself in the current version (1.71.21) I use for my development.
The fix in the commit 45696fe is available as of UI5 1.75.x.
Since I cannot change my version, I implemented the given solution in my package:
{ // Controller
onInit: function () {
// ...
this.calendarTemporaryFix(); // Not needed since UI5 1.75
},
calendarTemporaryFix: function () {
// SinglePlanningCalendar required from "sap/m/SinglePlanningCalendar"
const fnSetSelectedView = SinglePlanningCalendar.prototype.setSelectedView;
SinglePlanningCalendar.prototype.setSelectedView = function (vView) {
if (typeof vView === "string") {
vView = sap.ui.getCore().byId(vView);
}
return fnSetSelectedView.call(this, vView);
};
},
// ...
}
I'm wondering how I can pass non-string data between two pages in Ionic 5 using ReactRouter.
All solutions I could find used Ionic and Angular or just passed one string as URL parameter.
These are my components so far:
App.tsx
const App: React.FC = () => {
return (
<IonApp>
<IonReactRouter>
<IonSplitPane contentId="main">
<Menu />
<IonRouterOutlet id="main">
<Route path="/page/Home" component={Home} exact />
<Route path="/page/DataEntry" component={DataEntry} exact />
<Route path="/page/Request" component={Request} exact />
<Route path="/page/ResultMap" component={ResultMap} exact />
<Redirect from="/" to="/page/Home" exact />
</IonRouterOutlet>
</IonSplitPane>
</IonReactRouter>
</IonApp>
);
};
Page 1 here collects user input data (strings, objects, arrays) and I want to call the route '/page/ResultMap' on Button click and pass the data, so the next page can handle it:
<IonGrid>
<IonRow>
<IonCol class="ion-text-center">
<IonButton text-center="ion-text-center" color="primary" size="default" routerLink='/page/ResultMap'>Erkunden!</IonButton>
</IonCol>
</IonRow>
</IonGrid>
Page 2, which should receive the Data:
const ResultMap: React.FC = () => {
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Map</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
</IonContent>
</IonPage>
);
};
I understand the React principle about props and state, I just dont know how to combine it with Ionic in this case.
I appreciate your help!
Edit:
As suggested I changed the button onClick like this:
<IonButton text-center="ion-text-center" color="primary" size="default" onClick={e => {
e.preventDefault();
history.push({
pathname: '/page/ResultMap',
state: { time: transportTime }
})}}>
And try to receive the data on the ResultMap page like this:
let time = history.location.state.time;
But I get the error:
Object is of type 'unknown'. TS2571
7 | let history = useHistory();
8 |
> 9 | let time = history.location.state.time;
| ^
How do I access the passed object on the new page?
as for react-router I know you can use this:
history.push({
pathname: '/template',
state: { detail: response.data }
})
in this situation you can pass data without URL Params
can also use history.replace
if you redirect and want the back button work properly to the end user
and for the history do the following
let history = useHistory();
Check this link for a great understand how to implement the useHistory type
I have defined a smart filter bar like the following:
<smartFilterBar:SmartFilterBar id="smartFilterBar" entitySet="DamageReportSet" persistencyKey="SmartFilter_Explored" initialized="onFilterInit">
<!-- layout data used to make the table growing but the filter bar fixed -->
<smartFilterBar:layoutData>
<FlexItemData shrinkFactor="0"/>
</smartFilterBar:layoutData>
<smartFilterBar:controlConfiguration>
<smartFilterBar:ControlConfiguration key="Id" visibleInAdvancedArea="true" preventInitialDataFetchInValueHelpDialog="true" index="1"/>
<smartFilterBar:ControlConfiguration key="Plant" visibleInAdvancedArea="true" preventInitialDataFetchInValueHelpDialog="true" index="2" id="plantFilterBox">
<smartFilterBar:defaultFilterValues>
<smartFilterBar:SelectOption low="{appView>/Role/Plantid}"></smartFilterBar:SelectOption>
</smartFilterBar:defaultFilterValues>
</smartFilterBar:ControlConfiguration>
</smartFilterBar:SmartFilterBar>
In some cases the {appView>/Role/Plantid} property is empty. Now the question is how can I modify the smart filter bar and remove the default value or the filter when it is empty!?.
Actually when it is empty it will apply a filter for empty values!
I tried something like this but was not the answer:
onFilterInit: function(oEvent){
this.byId("plantFilterBox").destroyDefaultFilterValues();
oEvent.getSource().clearVariantSelection();
}
Finally I found a way as follow:
onFilterInit: function (oEvent) {
var oFilterBar = oEvent.getSource(),
oFilterData = oFilterBar.getFilterData(),
oAppViewModel = this.getOwnerComponent().getAggregation("rootControl").getModel("appView");
if (!oFilterData) {
oFilterData = {};
}
if (oAppViewModel.getProperty("/Role/Plantid") === "" || !oAppViewModel.getProperty("/Role/Plantid")) {
oFilterData.Plant = {
items: [],
ranges: [],
value: null
};
this.byId("plantFilterBox").removeAllDefaultFilterValues();
}
oFilterBar.setFilterData(oFilterData, true);
}
I have a problem to display data in my detail page. I've tried almost everything but its dosnt work. On main page everything looks fine. Routing work (display proper ID on network address).
Details.controller.js :
return Controller.extend("sapProject.controller.Details", {
onInit: function () {
var oTable = this.getView().byId("details");
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("model/Object.json");
oTable.setModel(oModel);
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("Details").attachMatched(this._onRouteMatched, this);
},
_onRouteMatched : function (oEvent) {
var oArgs, oView;
oArgs = oEvent.getParameter("arguments");
oView = this.getView();
oView.bindElement({
path : "/Objects(" + oArgs.employeeId + ")",
events : {
dataRequested: function () {
oView.setBusy(true);
},
dataReceived: function () {
oView.setBusy(false);
}
}
});
},
and this is my Details.view.xml:
<Page
id="details"
title="{i18n>EmployeeDetailsOf} {FirstName} {LastName}"
showNavButton="true"
navButtonPress="onBack"
class="sapUiResponsiveContentPadding">
<content>
<Panel
width="auto"
class="sapUiResponsiveMargin sapUiNoContentPadding">
<headerToolbar >
<Toolbar>
<Title text="{i18n>EmployeeIDColon} {EmployeeID}" level="H2"/>
<ToolbarSpacer />
</Toolbar>
</headerToolbar>
<content>
<f:SimpleForm>
<f:content>
<Label text="{i18n>FirstName}" />
<Text text="{FirstName}" />
<Label text="{i18n>LastName}" />
</f:content>
</f:SimpleForm>
</content>
</Panel>
</content>
</Page>
I think you are binding an empty model to your detail view because probably the loadData function is not completed when you set the model on the Table.
Try to load your json file in the manifest (best option) or differ the setModel on the _onRouteMatched function (although I don't see any table in your detail view).
EDIT:
You can also use this code after oModel.loadData("model/Object.json");
oModel.attachEventOnce("requestCompleted", function(oEvent) {
// Here your file is fully loaded
});
Firstly I recommend you to bind like this:
var sObjectPath = this.getModel().createKey("Objects", {
ID: oArgs.employeeId
});
this._bindView("/" + sObjectPath);
...
}
_bindView: function (sObjectPath) {
//Todo: Set busy indicator during view binding
this.getView().bindElement({
path: sObjectPath,
parameters: {
},
events: {
change: this._onBindingChange.bind(this),
dataRequested: function () {
}.bind(this),
dataReceived: function () {
}.bind(this)
}
});
},
Secondly check if oArgs.employeeId has a valid value and also if the model is loaded with data, easily set a brekapoint or write console.log(this.getView().getModel().oData).
I want set the content of a list into a popover.
The result is this:
There are two list by different data binding. The 2nd work and the 1st not work...
This is the xml of the popover
<Popover
showHeader="false"
contentWidth="320px"
contentHeight="500px"
placement="Bottom" >
<List
items="{menuPath>/pathlist}">
<StandardListItem title="{level}" />
</List>
<List
items="{/nodes}">
<StandardListItem
title="{text}"
type="Navigation"
tap="doNavOnSelect" >
</StandardListItem>
</List>
</Popover>
The 1st data-binding (not-work) is this:
var aPath=new Array();
obj=new Object(); obj.level='lev1'; aPath.push(obj);
obj=new Object(); obj.level='lev2'; aPath.push(obj);
obj=new Object(); obj.level='lev3'; aPath.push(obj);
var oModel = new sap.ui.model.json.JSONModel();
//oModel.setData({pathlist:aPath}, true);
oModel.setData({pathlist:[{level:'uno'},{level:'due'},{level:'tre'}]}, true);
sap.ui.getCore().setModel(oModel, "menuPath");
and the 2nd data-binding (work) is this:
this.getView().setModel(new sap.ui.model.json.JSONModel("apps/appIntra/master/GEN_intra_Master.json"));
and the json file is this:
{
"nodes" : [
{
"id" : "help",
"text" : "Help"
},
{
"id" : "intra_acquisti",
"text" : "ACQUISTI"
},
{
"id" : "intra_cessioni",
"text" : "CESSIONI"
}
]
}
Instead of
<StandardListItem title="{level}" />
use
<StandardListItem title="{menuPath>level}" />
If you use named models, always remember to include them in all the bindings where necessary :)