I'm reading the official documentation. However it only shows me how to route the model to a different view and I want to route a key? Experts any suggestions?
To pass data between Views you could either use a Model with is accessible to both - for example one that has been created in the Component.
Or you could add a query parameter to your routing to enable the user to bookmark the state. For that, modify the route-pattern to look like this:
{
"pattern": "employees/{employeeId}/resume:?query:",
"name": "employeeResume",
"target": "employeeResume"
}
When you do a navigation you can then add any key-value pairs to your URL to transfer data between views. The following call will make the URL-hash look like this: #/employees/3/resume?tab=Projects
oRouter.navTo("employeeResume", {
employeeId : 3,
query: {
tab : "Projects"
}
});
Examples taken from the Developer Guide. Also see the API Reference for Route.
Related
I'm working on a parent component, with conditionally rendered children components. I am simplifying the parent component a bit to help clarify my issue.
Display 1: Display list of "Courses"
The page starts off displaying a list of the user's "Courses"; a "Course" is just a collection inside Firestore. To access these collections, I call the "FirestoreConnect()" at the export default line of the end of this parent component.
However, once the user clicks on one of the Courses that are displayed, the screen enters Display 2.
Display 2: Display list of "Lectures"
Once the user chooses a course, I want it to display a list of that courses "lectures". "Lectures" are simply Firestore sub-collection within that specific courses collection. However, since I already called the "FirestoreConnect()" once already during the initial rendering of this parent, I don't know how to recall it specifically to read the selected sub-collections material. (Since I didn't know before hand which course the user would choose.)
Is there a way to continue recalling a FirestoreConnect() multiple times, for different collections, inside the same parent component?
Since we don't see your code, I will be guessing how you are passing the parameters for your firestoreConnect(). I'm saying that to clarify that you need to pass the subcollection/subdocument hierarchy information as to firestoreConnect(). So, your code would be something like below:
const enhance = compose(
firestoreConnect(props => {
return [{ collection: "Courses", doc: props.uid, subcollections: [{ collection: "Lectures" }], storeAs: `${props.uid}-lectures` }];
}),
connect(({ firestore }, props) => {
return {
lectures: firestore.ordered[`${props.uid}-lectures`] || []
};
})
);
...
const Lectures = ({ firestore, lectures }) => {
return <YOUR_LECTURES_LIST_UI>
}
While this code is untested, it was based from this tutorial here and I believe it might help you. You just need to know that the subcollection is still referenced in your firestoreConnect(), so the application already has this part of the collection configured.
In case this still doesn't help you, I would recommend you to check this other similar cases below, because they might help you as well.
Choose firestore subcollection when connecting component to redux with react-redux-firebase
How to load firestore subcollection to redux store?
Let me know if the information helped you!
sorry for simple question, but I'm new both to spring, JPA and Jhipster.
I'm following a video tutorial, and in one step the teacher was "customizing" the default view to sort on a custom column. He did so by changing the method in the repository class, to a query that ordered by one of the columns. This works, but I noticed that doing that the UI sort (the sort the UI impose clicking on the column) stopped working.
Debugging i noticed that the reason is that the query filter first by date, then by "pageable".
What is the best practice to apply the "byDate" sort just as a default, in case the pageable is empty?
I managed to "hack" the system by deep inspecting the page object and with an "if there is an UI sort use repository method A (the one that is natively unsorted), if there is not use repository method B (the one that is already sorted)". What I'm looking for is the "right way", the best practice, because I want to learn to program the way it is supposed to be, and I'm pretty sure that to have a default sort column is not a such exotic request
Here it is the link to the video
many thanks
You can set the default sorting column of any view in the [component-name].route.ts. In that file you will see something like this:
// ...
export const fooRoute: Routes = [
{
path: '',
component: FooComponent,
resolve: {
pagingParams: JhiResolvePagingParams
},
data: {
authorities: ['ROLE_USER'],
defaultSort: 'id,asc', // <- Look at this line :)
pageTitle: 'jhipsterApp.foo.home.title'
},
canActivate: [UserRouteAccessService]
},
// ...
The default order set by JHipster is by column id in ascending order. If you want to set the default order by column name descending (just as an example) just change that line to the following:
defaultSort: 'name,desc',
My app is generated via recent JHipster 7.4.1 and uses Vue frontned.
There are no [component-name].route.ts files generated.
I tried to add defaultSort into entities.ts but no luck.
This is working here:
In the [entity-name].components.ts,
change
public propOrder = 'id';
into
public propOrder = '[your default sort column, e.g. name]';
I am working on an existing application with legacy code base. While I would love to see the entire app converted to a PWA some day, for now my plan is one page (one url) at a time. For this, I know that the "scope" property is going to be my best friend for some time. While I can pass "." as a value to the property and treat all the routes as PWS, but as I mentioned earlier, that's not the plan. Hence, below is not an option for me.
{
"scope" : "."
}
For now, I plan on covering only two routes under the PWA scope, "list page" and the "details page". Hence I would have preferred something like below to work, but it did not.
{
"scope" : [
"/list",
"/id/details"
]
}
Any suggestion(s)?
The scope member is a string that represents the navigation scope of this web application's application context.
https://w3c.github.io/manifest/#scope-member
It will not support an array of multiple values.
An option would be to use the scope /pwa/ (or similar) and as you migrate sections of the app redirect /list to /pwa/list, etc.
This question is related to:
Fiori - Cross Application Navigation
http://help.sap.com/saphelp_uiaddon10/helpdata/en/07/9561b716bb4f2f8ae4e47bacbdb86d/content.htm
Remove URL params on routing
My use case is like this:
I have multiple applications that should link to others (deep).
Since documentation of cross navigation mention to avoid deep links I decided to use a startup parameter.
For example:
Application A has a list of some items in the detail view of one item there is a reference to another application B that contains some other details.
Assume A shows article details and B shows some details of a producer of an article.
Application A would now use some navigation like this:
sap.ushell.Container.getService("CrossApplicationNavigation").hrefForExternal({
target : { semanticObject : "ApplicationB", action : "display" },
params : { "someID" : "102343333"}
})
Now in application B I use code like this inside the Component.js at the end of the init method.
var oRouter = that.getRouter().initialize();
var oComponentData = this.getComponentData();
if (oComponentData.startupParameters) {
oRouter.navTo("SomeView", {
someId : oComponentData.startupParameters.someID[0],
}, false);
}
First question: Is this the right place for handling the startup parameters?
Second question: If I using the navigation the startup parameter will still be in the code, I would prefer to remove it, but how?
Update
In the target application (B) it would lead to the following URL:
https://server/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=100&sap-language=EN#SemObject-display?someID=102343333&/SomeView(102343333)/
Anyhow I would prefere to have something like this:
https://server/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=100&sap-language=EN#SemObject-display?/SomeView(102343333)/
The parameter must be retrieved as
var oComponentData = this.getComponentData();
if (oComponentData.startupParameters) {
oRouter.navTo("SomeView", {
someId : oComponentData.startupParameters.someID[0],
}, false);
as you write. In Fiori applications, the startup parameters injected into the Component data of your constructor may have been renamed, enriched by further default values etc.. Thus they may be distinct from the parameter one observes in the url. Applications are advised to refrain from trying to inspect the URL directly.
If one supplies a very long set of url parameters, one will observer that the FLP replaces some of them with sap-intent-param=AS123424 ("compacted URL") to work around url length restrictions on some platforms and in bookmarks, in the
getComponentData().startupParameters one will receive the full set of parameters).
As to the second question.
No, there is currently no way to "cleanse" the URL and avoid the redundancy between and inner app route.
SemObject-display?someID=102343333&/SomeView(102343333)/
which after navigation may look like
SemObject-display?someID=102343333&/SomeView(102343999)/
App was started with 102343333, but then user navigated within the app to another item (102343999).
Any change in the "Shell-part" of the has (SemObject-display?someID102343333) will lead to a cross-app-navigation (reinstantiation of your component) with a different startupParameter.
(There are cases where this is desired in the flow, e.g. a cross navigation from a OrgUnit factsheet to the parent OrgUnit factsheet via a link).
There were ideas within SAP to fuse the inner-app routes and the intent parameters, but they were not carried out, as it's mostly url aesthetics.
Note: To support boomarking, one has to respect both startup parameters and
inner app route during component instantiation,
assuming the user created a bookmark on
SemObject-display?someID=102343333&/SomeView(102343999)/
(While he was looking at 9999(!)).
When reinstantiating the app, the inner app route should take higher precedence than startup-parameters.
So amend the code to:
var oComponentData = this.getComponentData();
if (oComponentData.startupParameters) {
if (sap.ui.core.getHashChanger().getHash()=== "") {
// if no inner app route present, navigate
oRouter.navTo("SomeView", {
someId : oComponentData.startupParameters.someID[0],
}, false);
}
}
https://sapui5.netweaver.ondemand.com/#docs/api/symbols/sap.ushell.services.CrossApplicationNavigation.html
SAP Fiori Launchpad for Developers, Navigation Concept
http://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/907ae317-cb47-3210-9bba-e1b5e70e5c79?QuickLink=index&overridelayout=true&59575491523067
I was having issues navigating from a Fiori elements app in to a deep page in a freestyle UI5 app and then answer from #user6649841 provided most the solution for my requirement.
In my instance, navigating from the elements list report (app "A") in to the target freestyle app (app "B") I didn't want the worklist/initial page in app B to display at all and instead go straight to the detail page without a flickering of the initial app screen.
The below worked for me, note though it doesn't solve the ugly URL issues. In my case I'm not fussed about it as my nav back will nav back to the elements list report (App A) and never show the worklist page in App B so the user will never make another search on top of this URL which would lead with inconsistent inner and outer keys
Component.js (at end of init function after all the standard sap code, but before router initialization):
var oComponentData = this.getComponentData();
var startupParams = oComponentData.startupParameters;
if (startupParams && startupParams.myQueryStringParamName && startupParams.myQueryStringParamName[0]) {
//In my case using hash changer as I dont want the original landing page (default route) to be
//in the history, so the detail page loads straight away and nav back will cause to nav back to App A
var hashChanger = sap.ui.core.routing.HashChanger.getInstance();
hashChanger.replaceHash("detailPage/" + startupParams.myQueryStringParamName[0]);
}
//initialise after the above so the new hash is set and it doesnt initially load the
//page assigned to the default route causing a flickering and nav slide effect
this.getRouter().initialize();
Looking at the UI5 SDK in UI5 1.48 and above in the initialize method of router you can pass in a boolean to tell it to ignore the initial hash so possibly can do a simpler implementation in newer releases of UI5
Is Component.js right place for handling the startup parameters?
Depends,if you have multiple views and you want to dynamically route based on the incoming parameters. Else you can handle in specific view also.
Your second question was not quite clear to me.
Nevertheless, if you want to only specific cases of startup parameters, then from Source App, set some flag to understand where is the request coming from and handle accordingly. So this way, your normal navigation won't be tampered.
I'm hoping this is a rather simple question, but I'm pretty new to MVC and can't see clearly how it should be done. I have a site that I need to translate to another language. I've tried to search on this, but all I found was pretty complex translations about how to handle strings etc in resx files. That may be something for later, but for now all I want is to be able to let the user switch language (by links I can place in the master page), and then based on that choice have different pages shown in different languages.
From my search it seemed this could be achieved by routing somehow. As suggested in another post:
routes.MapRoute(
"Default",
"{language}/{controller}/{action}/{id}",
new { language = "en", controller = "Home", action = "Index", id = "" }
);
And the master page switch links:
<li><%= Html.ActionLink(
"Spanish",
ViewContext.RouteData.Values["action"].ToString(),
new { language = "es" })%></li>
<li><%= Html.ActionLink(
"French",
ViewContext.RouteData.Values["action"].ToString(),
new { language = "fr" })%></li>
<li><%= Html.ActionLink(
"English",
ViewContext.RouteData.Values["action"].ToString(),
new { language = "en" })%></li>
I could try this, but what I don't understand is, what type of routes does this create? Is it "language/controllername/actionname"? And if so, where does it lead? I mean, usually, with just a controller and an action, all I have is one controller and one view, and as long as that view exists it will work. But what is the language in this? Is it just as a folder, so if I have a folder say en-GB/Home such a route would work? That doesn't make sense, so I guess not. So how do I actually make these routes lead somewhere? Where do I place the translated views?
I think using resource files instead will be easier in the long run and not that hard to get going with.
Check out this link for more information.
Here's a quick how to on it.
Here's some gotchas to using resources in .Net MVC with solutions.
re the url, it is like you said / like it reads - language/controllername/actionname
re what it calls - what you need to focus on to understand it is in this bit of the route definition:
new { language = "en", controller = "Home", action = "Index", id = "" }
{controller}/{action}, matches the corresponding controller and action like before. Language and id matches those parameters in the action method you define. Those could also be properties of the (view)model, if that's the parameter you have in the method.
I don't think there is anything automatically hooked for the languages in mvc, so you have to explicitly decide how you want to handle it. One way would be for your action methods to return a view in a subfolder for each language or by adding the language as part of the file name.
Another way to go about it, is to define a handler in the route that sets the thread ui culture as you would in classic asp.net. From then on you use the asp.net mvc resources like in klabranche links.