UI5Flow is an open platform for all OpenUI5 (UI5) developers who would like to publish and share their applications. There are several use cases how to use it. It might serve you as an easy way how to present your apps to the customer (using a generated URL) and keep everything private, or you can make your work public and share your apps and th…
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE
README.md

README.md

UI5Flow

ui5flow.com

About UI5Flow Project

UI5Flow is an open platform for all OpenUI5 (UI5) developers who would like to publish and share their applications. There are several use cases how to use it. It might serve you as an easy way how to present your apps to the customer (using a generated URL) and keep everything private, or you can make your work public and share your apps and their versions with other users within and outside the platform.

Use cases

There are several scenarios how you can use the UI5Flow platform. Basic functionality of the platform is providing a space where you can easily register, build and publish your UI5 applications. Depending on your needs you can use and combine the features of the platform to reach your actual goal.

I`m beginning with UI5 development

Using UI5Flow you can find existing OpenUI5 applications and get in contact with experienced developers. This may help you in the beginnings and provide useful resource for your first applications. After you have created your first application, you can just simply publish it and share it with your friends.

I just need a simple boilerplate with option to publish my app

You can take any of your apps und use it as a template for your new apps. So anytime you start, you don`t have to spend time on the whole preparation of the application structure. After you`re done, simply publish your app and let your customers access it by sharing the generated link.

I want to create a list of my applications and make them accessible online

You have created a lot off apps which are stored in Git repos on various Git repo platforms? You would like to have overview about all your apps and get access to them anytime you need to present them or just check how you solved any feature implementation 6 months ago? UI5Flow helps you to get your UI5 developments organized at one place. It also brings you the option to have your apps online, so you can use them anytime you need to.

How to

Applications list

Applications list is displayed after user login. It consists of four separate filter views:

  • All displays all the owned and followed applications.
  • Public displays only application with Public visibility. These applications may be seen by other UI5Flow users.
  • Private displays applications visible to you only.
  • Followed displays applications of other UI5Flow users which you are following.

Clicking the tab will display the selected view with applications.

Register new application

  1. In the lower-right corner of the Applications list click the Register button.

  2. Type Name and Description of your application.

  3. Choose between Private or Public visibility of your application.

  • Private visibility means that only you can see and modify the registered application.
  • Public visibility enables also other UI5Flow users to see Properties, Versions and Repository (if set as visible) of your application.
  1. Click the Next button in the lower-right corner of the dialog window.

  2. Type HTTP(S) URL of your remote Git repository into the Git URL input field.

  3. Choose between Private or Public access to your Git repository.

  • Public Git repository is accessible without authentication.
  • Private Git repository requires authentication with your User and Password (Basic authentication over HTTP(S)).
  1. Click the Register button in the lower-right corner of the dialog window.

After successful registration you will be automatically redirected to your Application details.

Change application properties

  1. Select application in the Applications list to display the details.

  2. Select Properties tab.

  3. Click the Change button in the lower-right corner.

  4. You can change Display name, Description, Visibility and Git visibility.

  • Name is a unique identification of your application.
  • Display name is an application name suitable for display purpose and used as a default application name.
  • Description is the description of the application. It should contain a brief description of the functionalities, purpose, etc.
  • Developer is the username of the application creator (the user who registered the application)
  • Visibility sets the access to your application by other users.
    • Private visibility means that only you can see and modify the registered application.
    • Public visibility enables also other UI5Flow users to see Properties, Versions and Repository (if set as visible) of your application.
  • Git visibility sets the access to data of your Git repository.
    • Private visibility means that only you can see the data related to your Git repository (URL and commits history).
    • Public visibility enables also other UI5Flow users to see your Git repository data.
  1. Click the Save button to save your changes.

Delete application

  1. Select application in the Applications list to display the details.

  2. Select Settings tab.

  3. Click the Delete button and follow the instructions in the confirmation dialog.

  4. Click the Delete button in the lower-right corner of the confirmation dialog.

Your application will be deleted and you`ll be redirected to the Applications list.

Deletion of application will delete the application and all the objects related to the application (Versions, Service proxies). Deletion of application cannot be undone.

Display history of Git repository commits

  1. Select application in the Applications list to display the details.

  2. Select Repository tab.

  3. Click the Reload button in the lower-right corner.

    In case the Git account requires basic authentication, a login popup will appear.

Reload will trigger a Git pull command on the master branch of your Git repository and the actual status of the commit history will be displayed.

Create service proxy

  1. Select application in the Applications list to display the details.

  2. Select the Service Proxy tab.

  3. Click the Create button in the lower-right corner.

  4. Type Name and Description of the service proxy.

  5. In the definition part of service proxy provide following inputs:

  • Service path defines the context of your service.

    Example: In following service URL https://api.foo.com/service/do/something?query-param=value is path /service/do/something.

    In the Service path input type the path to your webservice.

  • Target host of your webservice

    Example: In following service URL https://api.foo.com/service/do/something?query-param=value is target host https://api.foo.com.

  • Service path transformation provides an option to replace any part of the Service path with an alternative path which might be necessary to access the service. This is suitable in cases where you have your webservices defined in your manifest.json file (or any other setup file) and you don`t want to make changes in your application source code to enable access of your webservices from the UI5Flow platform.

    Example: In the manifest.json you have defined webservices running on SAP HANA XS system which are accessible through a SAP SCP based destination. The webservice URL on SAP SCP is e.g. https://my-hcp-instance.dispatcher.hana.ondemand.com/destinations/my-service-destination/my-service/do/something?query-param=value. In case you want to access this specific webservice directly on your SAP HANA XS system from the UI5Flow platform with URL https://mysaphanainstance.ondemand.com/my-service/do/something?query-param=value you have to type following inputs:
    Service path: /destinations/my-service-destination/my-service/do/something?query-param=value
    Service path transformation (origin): /destinations/my-service-destination
    Service path transformation (target): `` (leave empty)
    Target host: https://mysaphanainstance.ondemand.com

  • Basic Authentication should be used in case your service requires authentication. Basic authentication is sent as a part of the HTTP(S) request header.

  1. Click the Save button in the lower-right corner of the dialog.

Service Proxy is created and displayed in the List of available data proxies. Created Service Proxy may be now used in the application Version definition.

Create application version

  1. Select application in the Applications list to display the details.

  2. Select Versions tab.

  3. Click the Create button in the lower-right corner.

  4. Type Version name and Description of new version. Developer is username of the application creator.

  5. Visibility sets the access to your application version.

  • Private visibility means that only you can see and modify your application version.
  • Public visibility grants public access to anybody who has the shared URL of your application version.

    In case the Visibility of already shared application version URL is changed from Public to Private the application version will not be accessible anymore. Version Visibility is independent of the Application Visibility, in case the Application Visibility is set to Private the version of the private application may be set to Public.

  1. Root directory enables you to select the right directory in the directory structure of your application for the application version. Generally the Root directory should contain index.html and Component.js file.

    By clicking the Apply button without selecting any subdirectory, the root folder will be selected. Navigation between subdirectories and their parent is possible using the Selected root path breadcrumbs.

  2. Service proxies gives you option to use built-in reverse proxy functionality of UI5Flow platform. This gives you an option to avoid cross-site scripting problems and enables you to run your application without changing your source code. Details about Service proxy creation you`ll find here.

  3. UI5 Application build provides you an option to automatically generate the Component-preload.js file.

    Precondition of successful generation of Component-preload.js file is the identification of Component path in the Component.js file. Component.js file has to be located in the selected Root directory. In case the Component.js file cannot be located or the Component path cannot be extracted from the Component.js file, there is an option to type the Component path manually.

  4. Click the Save button in the lower-right corner of the dialog.

Application version is created and displayed in the List of available application versions. In the List of available application versions you have the option to copy the URL of your version by clicking the Copy to clipboard icon.
You have also the option to download the source code of your Application version as zip-file.

Create application template

  1. Select application in the Applications list to display the details.

  2. Select the Templates tab.

  3. Click the Create button in the lower-right corner.

  4. Type Template name and Description of the template. Developer is username of the application creator.

  5. Select Source content directory of your template. Content of the selected directory will be copied into the content of the created template.

    By clicking the Apply button without selecting any subdirectory, the root folder will be selected. Navigation between subdirectories and their parent is possible using the Selected root path breadcrumbs.

    Application Template contains content of directory selected during the template creation. You can access List of available application templates of your application templates in any of your Applications and you can use it to copy content of your template into the application selected. Access to Application Templates is granted only to you. Other users cannot see them nor use them. Application Templates are suitable as boilerplates for your new developments. See Assign application template to find out more about assigning of Application templates.

  6. Click the Save button in the lower-right corner of the dialog.

Application template is created and displayed in the List of available application templates.

Assign application template

  1. Select application in the Applications list to display the details.

  2. Select the Templates tab.

  3. Select Application Template.

  4. Click the Assign button in the lower-right corner.

  5. Template name and Description describe the actually selected template.

  6. Select Target directory path to specify the directory path where to copy the application template.

    By clicking the Apply button without selecting any subdirectory, the root folder will be selected. Navigation between subdirectories and their parent is possible using the Selected root path breadcrumbs.

  7. Type Target directory name to specify the name of the directory which should be created in the selected Target directory path. The contents of Application Template will be copied into this directory.

    Assignment of Application Template will trigger a push of the new directory with content into the Git repository related to the application. Git repository authentication data has to be provided via a login popup.

  8. Click the Save button in the lower-right corner of the dialog.

    In case the process fails, please re-check if your login user and password is correct and also check if the remote Git repository is not locked due to too many unsuccessful login attempts.

After successful Application Template assignment you should see in your remote Git repository a new directory containing the source code artifacts of the assigned template.

Applications explorer

Applications explorer brings you the ability to search for public applications of other users. Search for the keyword in the name or description of an application and find applications you may find interesting and inspiring.

  1. In the lower-right corner of the Explore list click the Register button.

  2. Type a keyword in the search input field.

    In the list of found applications will be displayed also your own applications. They are marked with the Application owner icon so you can easily distinguish them.

  3. Click the an application which interests you.

  4. Check the details of the application and click the Follow button if you want to have the application in the Followed filter of your Applications list.

  5. Clicking the Applications button in the lower-right corner will bring you back to your Applications list.