sap/openui5-sample-app

OpenUI5 Sample App

openui5-sample-app's Issues

How to add the sapui5.runtime into the dependencies?

I'd like to use the SmartField control in the project, so how to add the corresponding sap.ui.comp resources and make it available to the resources directory?

ws: command not found

Getting the below error when tried to run serve-dist

ws --compress -d dist

sh: ws: command not found

Use source maps or something when debugging the UI5?

I really love the this project and it gave me more freedom and imagination using Grunt and Karma, thanks so much!

But I was wondering, how can I use the un-uglified version of UI5 from bower when I'm debugger the UI5? Maybe using source maps, or xxx-dbg.js when I load the UI5 from CDN)

The current debugging is a little bit hard to read the variable names in UI5 source code, as below:

Integration tests fail

Hello colleagues,

I've recently cloned the repository and tried to execute the integration tests using npm run karma.

Tests execution failed on the 2nd test, because button with id "clearCompleted" could not be found. I've tried to investigate further and found, that this button is not visible in the header OverflowToolbar, because "isMobile" is true. However, I'm running this app on the laptop and I've tried different browsers.

openUI5 version is 1.100.0; I'm running on Windows 10.

Please, take a look.

Thanks,
Ilya

karma is deprecated, wondering do we have any migration plan for this sample app?

Karma deprecation announcement: https://github.com/karma-runner/karma#karma-is-deprecated-and-is-not-accepting-new-features-or-general-bug-fixes

Cannot access the application when hooking the source code into a container of docker

I'm using the command below to link my local source code into a container of docker,
docker run -p 8080:8080 -v $(pwd):/var/www -w "/var/www" node npm start

And it returns the following logs in the console,

> [email protected] start /var/www
> ui5 serve

WARN types:library:LibraryFormatter Failed to detect namespace or namespace is empty for project themelib_sap_fiori_3. Check verbose log for details.
Server started
URL: http://localhost:8080

But I cannot access the http://localhost:8080, it shows failed.

Any ideas?

Usage of bootstrap tags to load Component

I just wondering if its still good practice to use:

data-sap-ui-rootComponent="todo"
data-sap-ui-xx-rootComponentNode="root"

... to load the Component. I notice that there is no mention of this in the beta release of OpenUI5 1.30. Its not used in the 1.28 best practice apps (master details and worklist) either.

Maybe the direction is still undecided here...

How to start a new UI5 project?

I get it that I can check out the sample app to learn UI5 quickly.
What's more, I'd like to know how to start a new UI5 project with ui5-cli or ui5-tooling or npm with my DIY project name/package name?
BTW, I'm using vs code instead of WebIDE.

Clear completed ({/completedCount})

There is one small issue: Clear completed ({/completedCount})

The binding is not running right here.

Unable to initialize UI5 CLI

I follow the step by step guide. I run all the mentioned commands. However, when I run ui5 command; I am facing the following issue.

Fatal Error: Unable to initialize UI5 CLI
Error: Cannot find module './shades-classic'
Require stack:

• /--/openui5-sample-app/node_modules/@ui5/cli/node_modules/cli-progress/presets/index.js
• /--/openui5-sample-app/node_modules/@ui5/cli/node_modules/cli-progress/cli-progress.js
  at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
  at Module._load (node:internal/modules/cjs/loader:901:27)
  at Module.require (node:internal/modules/cjs/loader:1115:19)
  at require (node:internal/modules/helpers:130:18)
  at Object. (/Users/username/Desktop/projects/github/openui5-sample-app/node_modules/@ui5/cli/node_modules/cli-progress/presets/index.js:2:25)
  at Module._compile (node:internal/modules/cjs/loader:1241:14)
  at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
  at Module.load (node:internal/modules/cjs/loader:1091:32)
  at Module._load (node:internal/modules/cjs/loader:938:12)
  at Module.require (node:internal/modules/cjs/loader:1115:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
  '/--/openui5-sample-app/node_modules/@ui5/cli/node_modules/cli-progress/presets/index.js',
  '/--/openui5-sample-app/node_modules/@ui5/cli/node_modules/cli-progress/cli-progress.js'
  ]
  }

when I dig down. I realized, shade classic is required but it is missing. I tried to find the npm command to install the classic shade but found nothing. I found shade install npm command and result is saying it is already installed.

const _legacy = require('./legacy');
const _shades_classic = require('./shades-classic'); // this line is producing the issue.
const _shades_grey = require('./shades-grey');
const _rect = require('./rect');

module.exports = {
    legacy: _legacy,
    shades_classic: _shades_classic,
    shades_grey: _shades_grey,
    rect: _rect
};

best practices?

Hi. Just wondering if the example here is to be seen as an example of best-practices for OpenUI5 development? Using tools such as grunt-openui5 to generate a preload file? And the use of bootstrap tags like the following:

data-sap-ui-preload="async"
data-sap-ui-xx-componentPreload="async"
data-sap-ui-rootComponent="todo"
data-sap-ui-xx-rootComponentNode="root"

Thx.

data-settings attribute value has to wrapped with single quote?

data-settings attribute value has to wrapped with single quote. Rest of the attribute value can be wrapped with conventional double quote. For example below: sap.ui.demo.todo can be wrapped with double quote. But the value of data-settings cannot. I understand this might because of the json object is using double quote. But it is a convention we use double quote for attribute values in html markup.

openui5-sample-app/webapp/index.html

Line 23 in 12b66d8

<div data-sap-ui-component data-name="sap.ui.demo.todo" data-id="container" data-settings='{"id" : "todo"}'></div>

[rl-reuse_tool-4] Violation against OSS Rules of Play

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-reuse_tool-4
Explanation: Is it compliant with REUSE rules? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

Minified sources?

This is not really an issue with this app but I was just wondering why Google Pagespeed would say the openui5 sources used by this app are not minified? I thought OpenUI5 only used the "-dbg" prefix for the un-minified files. Maybe the Bower versions are un-minified?

[rl-reuse_tool-4] Violation against OSS Rules of Play

A violation against the OSS Rules of Play has been detected.

Rule ID: rl-reuse_tool-4
Explanation: Is it compliant with REUSE rules? No

Find more information at: https://sap.github.io/fosstars-rating-core/oss_rules_of_play_rating.html

[question] How to add additional UI5 dependencies

Thank for putting this together, this is great!

I am wondering if there are any instructions, or possibly a blog post you could point me to regarding how to add additional UI5 components (i.e Form, SimpleFrom, and all the others) to the bower config? I can change the index.html to point to the CDN 'sap-ui-core.js', though I am not sure if there is a better way to keep everything contained within this build.

Also, once the 'dist' folder has been completed, how does one go about deploying this to GW? I like the idea of being able to build FLP-ready apps outside of using WebIDE.

Thanks again!

ReferenceError: jQuery is not defined

The app is not runnable using the commands provided in the Readme.
I cloned the repository, executed npm install and grunt serve. May have to do with OpenUi5 version 1.54 that is installed by default.
Opening localhost:8080 results in the following errors:

ReferenceError: jQuery is not defined sap-ui-core.js%20line%2055%20%3E%20eval:1:1
http://localhost:8080/resources/sap/ui/core/library-preload.js:1:1
execModule http://localhost:8080/resources/sap-ui-core.js:55:8353
requireModule http://localhost:8080/resources/sap-ui-core.js:55:6926
requireSync http://localhost:8080/resources/sap-ui-core.js:55:12062
http://localhost:8080/resources/sap-ui-core.js:60:5814

TypeError: sap.ui.getCore is not a function localhost:8080:19:3
http://localhost:8080/:19:3

Un-themed content briefly shows with a flicker...

I've cloned this app and started the server with grunt. When I navigate to localhost:8080 in the browser the page briefly flashed with plain html controls in the top left most corner and then snaps into the proper themed look... It only lasts for a split second but happens everytime I refresh the page.

This issue does not happen when I use a real SAP Fiori app served from our ABAP system, nor does it happen with my own UI5 apps served with grunt-contrib-connect.

With a little bit of playing around I've found that the culprit is the boot attribute: "data-sap-ui-preload="async"".
If this exists - the app looks to load faster however there is a delay before the styling is applied and hence you see an ugly initial flash of the unstyled controls.

When you remove this boot attribute you no longer see that uglyness but that load time is longer.

I also see this message in the console as well that I don't usually see: "ThemeCheck: Theme not yet applied".

Is there a way that the CSS can be loaded first?

Build fails with yarn

Hi,

I tried to build the sample project with yarn (1.21.1) and got the following error message.

yarn run build
yarn run v1.21.1
$ ui5 build -a --clean-dest
info normalizer:translators:ui5Framework Using OpenUI5 version: 1.80.0
info normalizer:translators:ui5Framework If project openui5-sample-app contains a package.json in which it defines a dependency to the UI5 framework library @openui5/sap.m, this dependency should be removed.
info normalizer:translators:ui5Framework If project openui5-sample-app contains a package.json in which it defines a dependency to the UI5 framework library @openui5/sap.ui.core, this dependency should be removed.
info normalizer:translators:ui5Framework If project openui5-sample-app contains a package.json in which it defines a dependency to the UI5 framework library @openui5/themelib_sap_fiori_3, this dependency should be removed.
info builder:builder Building project openui5-sample-app including dependencies...
info builder:builder 🛠  (1/7) Building project sap.ui.core
info builder:builder library sap.ui.core 🔨 (1/8) Running task escapeNonAsciiCharacters...
info builder:builder library sap.ui.core 🔨 (2/8) Running task replaceCopyright...
info builder:builder library sap.ui.core 🔨 (3/8) Running task replaceVersion...
info builder:builder library sap.ui.core 🔨 (4/8) Running task generateLibraryManifest...
info builder:builder library sap.ui.core 🔨 (5/8) Running task generateLibraryPreload...
ERR! builder:builder Build failed in 1.27 s
info builder:builder Executing cleanup tasks...

⚠️  Process Failed With Error

Error Message:
taskRepository: Failed to require task module for generateLibraryPreload: unknown estree node type 'ChainExpression', new syntax?

For details, execute the same command again with an additional '--verbose' parameter
error Command failed with exit code 1.

I tried to run yarn link as instructed in the readme file but this also failed:

yarn link @openui5/sap.ui.core        
yarn link @openui5/sap.m
yarn link @openui5/themelib_sap_fiori_3
yarn link v1.21.1
error No registered package found called "@openui5/sap.ui.core".
info Visit https://yarnpkg.com/en/docs/cli/link for documentation about this command.
yarn link v1.21.1
error No registered package found called "@openui5/sap.m".
info Visit https://yarnpkg.com/en/docs/cli/link for documentation about this command.
yarn link v1.21.1
error No registered package found called "@openui5/themelib_sap_fiori_3".
info Visit https://yarnpkg.com/en/docs/cli/link for documentation about this command.

Am I missing something here?

Error with ui5 serve -o index.html

When executing

ui5 serve -o index.html

I get the following error:

Error: Invalid specification version defined for project openui5-sample-app: 1.0. The currently only allowed version is "0.1"
at ProjectPreprocessor.configureProject (....AppData\Roaming\npm\node_modules@ui5\cli\node_modules@ui5\project\lib\projectPreprocessor.js:122:10)
at

Karma preprocessor filter doesn't include required *.js files

OpenUI5 version

1.58.4

Browser/version (+device/version)

macOS High Sierra 10.13.6

Steps to reproduce the problem

1. Open a terminal and move to project dir
2. Run npm install
3. Run npm test

What is the expected result?

Code coverage report for all *.js files which are not under the test folder.

What happens instead?

None of the required *.js files are taken into account for the code coverage report. Output of the npm test command:

TOTAL: 15 SUCCESS
----------|----------|----------|----------|----------|----------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
----------|----------|----------|----------|----------|----------------|
----------|----------|----------|----------|----------|----------------|
All files |      100 |      100 |      100 |      100 |                |
----------|----------|----------|----------|----------|----------------|

HTML output:

Error when running ui5

When running ui5 serve -o webapp/index.html i get error and the browser tab keep in loading state:

Server started
URL: http://localhost:8080/webapp/index.html
ERR! resources:adapters:FileSystem Error: ENOTDIR: not a directory, stat 'openui5-sample-app/webapp/index.html/'
ERR! resources:adapters:FileSystem { [Error: ENOTDIR: not a directory, stat 'openui5-sample-app/webapp/index.html/']
ERR! resources:adapters:FileSystem stack:
ERR! resources:adapters:FileSystem 'Error: ENOTDIR: not a directory, stat 'openui5-sample-app/webapp/index.html/'',
ERR! resources:adapters:FileSystem errno: -20,
ERR! resources:adapters:FileSystem code: 'ENOTDIR',
ERR! resources:adapters:FileSystem syscall: 'stat',
ERR! resources:adapters:FileSystem path:
ERR! resources:adapters:FileSystem 'openui5-sample-app/webapp/index.html/' }

MACOS Mojave, Node v10.15.0. When i build first and run it works fine.

todoitems.json is not loaded via Component-preload.js

I just cloned the repo and built it using npm run build and then npm run serve-dist to serve the app.
I realized that the file webapp/model/todoitems.json is in Component-repload.json but is loaded separately via a HTTP GET request.

Is this intended?
Is there a way to avoid the additional request and use the Component-preload?
Otherwise I think the todoitems.json should be removed from the Component-preload.

Tested with following versions:

• @ui5/cli 2.10.0
• OpenUI5 1.87.0

Component pre-loading - when is it better?

I notice that when playing with this application and changing it from using a component preload file or not there is little difference in loading time. In fact without component preloading is slightly faster (it also doesn't have the flicker that I mentioned in another issue).

So my question is - when is it best practice to use component preloading? Do you only get a benefit when your app has lots of views to avoid all the ajax requests..? Or is it something we should always aim to do noting that the underlying framework will improve and optimise things...

LR page need to work without shell page

Hi Team,

I am Using CDS annotations and creating V4 List report page successfully .

but i want to run the application from index.html with out any shell and FLP look in Home screen .

i changed the index script like below .
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"

Application loading without FLP look now .

But First time create i working , but second time if i click create button navigation failing . every time opening first record .

Error :