Option for custom App (IDE)

[srenault-meeds]

Rationale

Thanks to previous update, it is now possible to customize portlets with instances of portlets. In order to improve this experience of customizing the platform, we want to provide an option to create instance from an "empty" vue portlet.

This will enable admins to create their own instance, to test new use case before requesting productization of it.

1. Functional Requirements

Top User Stories

Prerequirements: This option will only be available if the related add-on is made available in your bundle.

Role: Only Platform Admin can access such option Access: From Development > Portlets

User journey:

1. Choose to create a new portlet When requesting to add an instance, As the addon has been made available, I have an option to select wether to create it from an existing portlet or from a new one

   

2. Creation page As I have requested to create from a new portlet Then a new page is opened with an "IDE"-like:

   • First row of field to add HTML, CSS, JS with option to expand their view so it is better to use Each of them will get the coloring of coding text
   • Second row of previewing the portlet

Only available once you have added code, so you can click to "RUN"

Once you request to run it, if no errors, you have the preview of what you are creating with option to run it again and to preview it as mobile

Once done, you can save it. The preview is automatically generated and the portlet is added into the list of instances as expected.

Impacts

Gamification

NA

Notifications

NA

Analytics

NA

Unified Search

NA

2. Technical Requirements

Expected Volume & Performance

N/A

Security

Only /platform/administrators group members should be able to create, delete and modify the application instances issued from IDE Portlet.

Extensibility

N/A

Configurability

N/A

Upgradability

N/A

Existing Features

N/A

Feature Flags

N/A

Other Non Functional Requirements

N/A

3. Software Architecture

Security

In order to secure access to the portlet instances, the portlet source code will not be stored in portlet preferences (which is protected by page edition permission only). The portlet instance source code will be stored in a dedicated set of Database Tables and the CMService API will be used to configure the corresponding source code to the portlet instance.

Access

The Portlet Instance will be configured using the portlet edit mode window. The Rich editors used to display source code of the portlet will use CodeMirror which is under MIT License and is compatible with Meeds License.

A REST API will be implemented to retrieve and save portlet instance associated source code. The Cache Control HTTP Headers has to be used to optimize static resources fetching.

Services & processing

N/A

Data and persistence

The used database Table to save Portlet instance data is:

[srenault-meeds]

@margondicco FYI

[margondicco]

Hello go fonc with a nice to have

for html, css and js, could we add dedicated style like this

[srenault-meeds]

Yes it is identified as follow:

Each of them will get the coloring of coding text

[boubaker]

Ready for tech review by DAO Members (eXo : @rdenarie )

[rdenarie]

Go tech

[boubaker]

A small update has been made to add usage of Cache Control HTTP Headers instead of E-Tag HTTP Header

[boubaker]

PRs and ACCs ready to be reviewed by DAO Members (eXo: @rdenarie @margondicco )

[rdenarie]

Ok for me

[boubaker]

Merged to develop