manifest.json entry
---------------------
"sap.ui5": {
"models": {
"": {
"dataSource": "Main",
"type": "sap.ui.model.json.JSONModel"
},
Page1.view.xml entry
---------------------
<Table id="Table1"
busy="true"
rows="{/Rowsets/Rowset/0/Row}">
Hi, I am trying to understand how best to use Busy Indicator.
App loads a table (sap.ui.table.table) in Page1 from a manifest.json dataSource.
I want to show table busy until the dataSource completes and the table is loaded.
Should I set 'busy' in Controller, instead of the View? (see above View example.)
I have seen many examples and tried to use the DemoKit with no success. Tried this with no success:
this.byId("Table1").setBusy(false);
Where should code be located to start/show busy, know the table is loaded, and then stop,hide,end the busy indicator?
Not sure if I should use
setBusy() or hide.
Thanks much for your thoughts.
Related
I am developing a VSCode extension and just finished adding the icon to the activity bar. What I want to do is, execute a command whenever the user clicks that icon. This is what I have tried:
Package.json
"viewsContainers": {
"activitybar": [
{
"id": "myID",
"title": "Testing",
"icon": "res/logo.svg"
}
]
},
"views": {
"myID": [
{
"id": "Explorer",
"name": "Browse contents",
"commands": "vscode-myorg.getContents"
}
]
}
However, the vscode-myorg.getContents command is not getting executed after clicking the icon. How can I achieve this?
In looking at Feature Request: Add an API event to indicate when the sidebar viewlet changes which was closed as waiting for another still open issue on getContext to be resolved. And using intellisense in package.json there is no other key besides id, title and icon. So you cannot put a command entry there for instance (I tried and nothing happened.)
There are a couple of other options that might work for you:
If your views are populated by a TreeView then you can detect when that treeViews' visibility changes:
myTree.onDidChangeVisibility(ev => {
console.log(ev); // ev.visibiltiy = true/false
})
So you can detect when the view becomes visible because the Activity Bar icon is clicked. That does work. However, this event is also triggered when the view is already opened and the user just collapses or expands that individual view. And I don't think there is really any way to distinguish between the two conditions.
If you are populating your views with a WebView there is also an onDidChangeVisibility event for that.
There is an activation event for a View becoming active:
"activationEvents": [
"onView:package-dependencies"
]
but that will only fire the first time a view is activated - and starts your extension's activate function so is probably not what you are looking for.
You have to define any new command of yours.
"commands": [
{
"command": "vscode-workat.getProblems",
"title": "Get Problems"
},
]
as well as register it in the extension.
On my quick app pages, some
content may be blocked by the app menu. For example, the sign-in entry is blocked by the app menu in the following figure.
Although the menu is configured to be movable, users do not know that they can move it.
How can I solve this problem?
The following solutions are provided to solve your problem:
Separating the menu from any content displayed
Hiding the menu
Adding a message indicating that the menu is movable
For Detail,pls kindly refer this link : What if some content is blocked by the app menu?
You can separate the menu from any content displayed by changing the value of titleBar to true in the manifest.json file.
e.g.
"display": {
"fullScreen": false,
"titleBar": "true",
"menu": false,
"menuBarData": {
"draggable": true
},
There is a good example with other solutions. Please check link
How do I change the initial view in an SAPUI5 project? I want to change the view that is being displayed when the route pattern is ""
Should I change the rootView property in manifest?
"rootView": {
"viewName": "namespace.view.App",
"type": "XML",
"id": "app"
}
Kindly help
Thank you for everyone's assistance and suggestions.
Since the application I was editing used routing and the navigation target resolution service was configured to resolve the empty location hash to the application, I made changes to its routing configuration.
I changed the values in the "routing" configuration's "routes" where pattern was set as "" to the values of the view I wanted to display when I run the application.
Yes, You can change it there.
Replace viewName with new existing view :)
Change namespace.view.App to namespace.view.NewInitialViewName.
You can also delete App.view.xml and App.controller.js if you are not using them.
I have a Master Details Page App where we configured the Router for the same to navigate between pages.
App.view.xml
<SplitApp id="rootControl" detailNavigate="onDetailNavigation">
</SplitApp>
manifest.json
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewPath": "master",
"controlId": "rootControl",
"viewType": "XML",
"async":"true"
},
"routes": [
{
....
},
...
"targets": {}
...
App is simple Employee CRUD app, i have configured the router with 2 routes 1 for Create/Edit and another one for Dispaly
I need to destroy the view if i navigate from one view to another view, like on start of the page show the Master Page with all the employees and detail page show display view of the employee1.
i have Edit button on the Display view, on press i navigate details page from Display view to Edit View, on this point i need to destroy the Display view from the router, which is cached.
How to achive this? or do i need to take different approch to solve the cacheing? or I should not think of Memory
tried calling destroy onDetailNavigate of SplitApp
onDetailNavigation : function(oEvent){
console.log("Split app onDetailNavigation");
oEvent.getParameter('from').destroy();
}
Which gives Error next time go back to same view again
Error: The object with ID __xmlview4 was destroyed and cannot be used anymore.
According to the comments you destroy views to save the memory allocated by your two views. I do not think this brings any real benefit. There are three possible solutions:
Stick with the current solution.
Use a single view and switch between a display and a edit fragment. An example can be found here.
Use a single view with a form with input fields. Bind the editable attribute against a model (e.g. view model) property reflecting edit or display state of the whole form or per property.
<Input value="{applicationModel>/propertyName}" editable="{viewModel>/editable}"/>
I'm using a version of the third solution. My application model (extending JSONModel) holds the application data plus a state controlling the property. The controller just calls setEditable on the application model which computes the state. Using this approach I avoid to spread the logic accross to many parts of the application.
<Input value="{applicationModel>/propertyName}" editable="{applicationModel>/Attributes/propertyName/editable}"/>
Since my Question is about the destroying the view from Router which are cached, i have followed the #boghyon comment and made some changes in my code as below which removes the pages after navigation of detail page as below
var splitApp = this.getView().byId('rootControl');
splitApp.removeDetailPage(oEvent.getParameter('from'));
and to remove the cached view from router i have wrote some logic
var router = this.getOwnerComponent().getRouter();
for(var view in router._oViews._oViews){
if( router._oViews._oViews[view].sId === oEvent.getParameter('fromId'){
delete router._oViews._oViews[view];
}
}
Which destroy the view.
By doing this which loads the views multiple times and this is not proper ways for my requirement we have follow the #matbtt answer.
Thank you both for the valueable input.
On UI5 and FIORI SplitApp application, whenever users are viewing the app on portrait mode on their devices, the first screen that is being shown is the 2nd view/screen. Is it possible to bypass this behavior (but still using splitapp) so the on load of the application, users will see the 1st screen of the split app?
Thanks!
Switch your targets in your manifest.json (or wherever you are defining your routes)
"routes": [{
"pattern": "",
"name": "master",
"target": ["home", "master"]
}, {
...
}]
This means that home (the detail view) is rendered below master (the master view), thus the master view is shown first.