New Extension: How to use the APS 3.0

[franckblais]

Hi there !

I tried to start a new extension yesterday and wanted to use the APS 3.0 as well. I had a unpleasant moment trying to figure out how to use it ...

I've read Karol's blog (http://scn.sap.com/docs/DOC-64888) about how to build an app in 20 minutes. It took me 2 hours (on and off) and nothing in the APS at the end.

What I've done:

• Copy KPI Tile
• Renamed the extension in the different files (contrib.xml, all files in spec)
• Removed content from ztl
• Adjusted the spec to:
  • Have one attribute type string in the APS
  • Change the name stuff like that
• Started global build script (with new lines for new extension)

What's I've had:

• Errors because of the NewExtSpec.json file: It's not updated from the Spec/ folder files ... Have I missed something ?
• Adjusted NewExtSpec.json: Extension appears in DS ... but no APS at all. Blank page.

Questions:

• Do we have any docs on Basics and Commons methods ? (I've still have to check in our official docs)
• Any recommandations using those ?
• I tried to replicate my coding from last extension and display an image in the extension generated div with that.$().append('htmlcode'). Didn't work. Methods have been renamed ? (for instance afterDesignStudioUpdate).

If needed, you can have a look at the files here https://drive.google.com/folderview?id=0Bw0kg_Viku6Ld0tOYnZ3NHFUbEE&usp=sharing

Thanks for the help ... Really struggling with it when I shouldn't ...

[franckblais]

Hi,

I've removed lots of things from my extension, and the APS appears. Still:

• How do i generate content in the div itself ? I've read the other extension and cannot find anything :(
• How the NewExtSpec.json is updated ? I had to manually put /spec entries in it.

Thanks

[franckblais]

CustomMap2.txt

Alright ... I had a look at Donut, and tried to copy it. Now nothing works ...

sap-ui-core-zen.js:54 2016-04-05 16:58:00 A JavaScript error occurred. "[object Object]" is not valid for aggregation "control" of Element sap.zen.commons.layout.PositionContainer#container2 Error: "[object Object]" is not valid for aggregation "control" of Element sap.zen.commons.layout.PositionContainer#container2 at g.validateAggregation (http://localhost:60989/aad/resources/~20151112172347~/sap-ui-core-zen.js:172:10147) at g.setAggregation (http://localhost:60989/aad/resources/~20151112172347~/sap-ui-core-zen.js:172:10264) at P.setControl (http://localhost:60989/aad/resources/~20151112172347~/sap-ui-core-zen.js:799:1061) at Function.P.createPosition (http://localhost:60989/aad/resources/~20151112172347~/sap-ui-core-zen.js:799:2709) at A.insertContent (http://localhost:60989/aad/resources/~20151112172347~/sap-ui-core-zen.js:787:2307) at insertIntoAbsoluteLayoutContainer (http://localhost:60989/aad/zen/mimes/combined_static_includes_1.js?version=20151112172347:10313:130209) at http://localhost:60989/aad/zen/mimes/combined_static_includes_1.js?version=20151112172347:10313:166596 at createAndAdd (http://localhost:60989/aad/zen/mimes/combined_static_includes_1.js?version=20151112172347:10313:140513) at z (http://localhost:60989/aad/zen/mimes/combined_static_includes_1.js?version=20151112172347:10313:121298) at dispatchCreateControl (http://localhost:60989/aad/zen/mimes/combined_static_includes_1.js?version=20151112172347:10313:120127) -

[franckblais]

I managed to get it working by copying and reusing the Table extension. At least I understand how the html content is added :)

If you have any information regarding the question, I'll leave the issue open for a while. Thank you.

[MartinPankraz]

Hi Franck,

Getting some more info out there how to use the more sophisticated parts of our framework would be nice but quite a job. Cool, that you already started to put something together. I can offer to cross check your document and extend if you want to once it is uploaded.

Regarding your questions:

• AfterDesignStudioUpdate refers to components of type sapui5. So you were struggling with the DesignStudio framework itself and not the community repository.
• You picked the right route in the end learning from other components how to use our code generation framework correctly. The beauty of it is that you can get some very complex APS by just filling the json spec file.
• I believe basics refers to a naming convention that Karol came up with when streamlining the repository to share coding within. Commons usually points to the SAP UI5 library. There are the normal UI5 sap.commons and the new one sap.m (formerly known as mobile but nowadays main).

Regards Martin

[KarolKalisz]

Hi Franck, I see you had a busy day... sorry, the blog is just stopping in the middle. I just wanted to see if there is an interest before writing more.

in short, I create the components by the generation. there are few steps:

• create a new folder (e.g. res/BigButton)
• then create the /spec subfolder
• and then I copy always the 3 required files from a component which is the nearest one for my new one:
• specification.json
• component.json
• about.json

The details are desribed a bit in the blog. What is misses is a clear description of control->sepcification statement. I can try to add this. What I do, I find the control in some component which is already working and see how it is specified.

important are first the settings in component.json. especially the "handlerType": "sapui5", // the component type (sapui5 | div | datasource), different templates are used

now, when component.json is ok, you need to generate the other files

Generation you have to open the project /community.sdkpackage/tools/tools.html.generator

when opened, it compiles and then you can run it. either from debugger or from command line /community.sdkpackage/script/2-build-docu.cmd

if everything is good, all other required files will be created in your new component.

then, in the repository you have to add your new component into the corresponding file /community.sdkpackage/src/org.scn.community./script/build.cmd

and execute again the /community.sdkpackage/script/1-prepare_build.cmd

after that, you should see that the main contribution files changed. and then you can start debugger and your new component is there (of course it will not render as the js file is generated empty).

If you wish I can make a blog with an full example on this.

Karol

[franckblais]

Thanks Karol ! I'll try the steps before, but continuing the blog could be interesting.

Could you just give me insights on the handler types ? "handlerType": "sapui5", // the component type (sapui5 | div | datasource), different templates are used

What's the difference between them ? Datasource, pretty obvious. does sapui5 works in both normal and m mode ? what about div ? Is that in the DS dev doc ? I still need to have a look at it.

Last question: I copied the table component, and at the end of the js file I have:

myComponentData.instance = CustomMap;

Component.subclass(myComponentData.fullComponentName, myComponentData.instance);

Does Component subclass instruction works both in m and normal mode ? What would be the different by extending sap. ... .AbsoluteLayout ? Do I need to include a call to JQuery as well (don't remember which one does that).

On Wed, Apr 6, 2016 at 7:05 AM, Karol Kalisz notifications@github.com wrote:

Hi Franck, I see you had a busy day... sorry, the blog is just stopping in the middle. I just wanted to see if there is an interest before writing more.

in short, I create the components by the generation. there are few steps:

• create a new folder (e.g. res/BigButton)
• then create the /spec subfolder
• and then I copy always the 3 required files from a component which is the nearest one for my new one:
• specification.json
• component.json
• about.json

The details are desribed a bit in the blog. What is misses is a clear description of control->sepcification statement. I can try to add this. What I do, I find the control in some component which is already working and see how it is specified.

important are first the settings in component.json. especially the "handlerType": "sapui5", // the component type (sapui5 | div | datasource), different templates are used

now, when component.json is ok, you need to generate the other files

Generation you have to open the project /community.sdkpackage/tools/tools.html.generator

when opened, it compiles and then you can run it. either from debugger or from command line /community.sdkpackage/script/2-build-docu.cmd

if everything is good, all other required files will be created in your new component.

then, in the repository you have to add your new component into the corresponding file /community.sdkpackage/src/org.scn.community./script/build.cmd

and execute again the /community.sdkpackage/script/1-prepare_build.cmd

after that, you should see that the main contribution files changed. and then you can start debugger and your new component is there (of course it will not render as the js file is generated empty).

If you wish I can make a blog with an full example on this.

Karol

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub https://github.com/org-scn-design-studio-community/sdkpackage/issues/100#issuecomment-206312113

Franck BLAIS

[franckblais]

Sorry for spamming. I have another error while trying to include a new 3rd party lib:

I've added the files in databound/os, the path compared to the error seems correct:

In my component config, I've required the lib like that:

"require": [ { "id": "common_basics", "space": "known" }, { "id": "jquery.imagemapster", "space": "known" } ],

[KarolKalisz]

Hi Frank,

on the switch to the offical requireJs in 1.6 release, the notation is changed. For compatibility with my old components I have kept those "known" modules, but now only ID is describing the path.

e.g. your statement should be { "id" : "databound/os/jquery.imagemapster/jquery.imagemaster", }, (example, but you can ignore the "space" attribute, https://github.com/org-scn-design-studio-community/sdkpackage/blob/master/src/org.scn.community.basics/res/ActivityViewer/spec/component.json#L20)

once generated, you should see this path in your JS file in the header, which is always "regenerated" until the mark "//%DEFINE-END%"

(example in ActivityViewer) //%DEFINE-START% var scn_pkg="org.scn.community.";if(sap.firefly!=undefined){scn_pkg=scnpkg.replace(".","");} define([ "sap/designstudio/sdk/component", "./ActivityViewerSpec", "../../../"+scn_pkg+"shared/modules/component.core", "../../../"+scn_pkg+"shared/modules/component.basics", "../../../"+scn_pkg+"basics/os/d3/d3", "../../../"+scn_pkg+"basics/os/d3-plug/gantt-chart-d3v2", "../../../"+scn_pkg+"basics/os/date/DateFormat" ], function( Component, spec, core, basics ) { //%DEFINE-END%

Hope this helps. I assume you can now run the generation code, right?

[franckblais]

Thanks for the quick answer Karol, I'll try that.

I didn't test the generation yet. I just manually copied the code in the Spec file.

[franckblais]

Error ...

Sending 'GET' request to URL : https://sapui5.hana.ondemand.com/ Response Code : 200 Exception in thread "main" java.lang.NullPointerException at org.scn.community.htmlgenerator.Main.listAllComponents(Main.java:165)

    at org.scn.community.htmlgenerator.Main.test_RunMain(Main.java:44)
    at org.scn.community.htmlgenerator.Main.main(Main.java:26)

[franckblais]

Maybe it's because of the strange path that I have. I'll move my files to see if it's correcting the issue (it can't read the mail ComponentManager files).

EDIT: I have a lead: Spaces in the folder name may cause the issue ... EDIT2: Do not work in a folder with spaces in the name ... :-1:

[franckblais]

Thanks Karol, now it works. At first, I had again an error, but it's just a typo: mapster and not master :+1: