Jumpstart Hands-On Guide… · Jumpstart Hands-On Guide . ... As a valued support customer, you can benefit by using the support web site to: Jumpstart Hands-On Guide. 4 Search for

Document date: August 2016 Software release date: July 2016

HPE Propel Software version 2.20

Jumpstart Hands-On Guide

Jumpstart Hands-On Legal Notices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Jumpstart Hands-On Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Jumpstart Hands-On - Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Install Node.JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Install npm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Install bower . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Install gulp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Jumpstart Hands-On - Creation and Customization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Build a Jumpstart Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Generate Jumpstart Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Integrate New Modules into Jumpstart Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Use Angular UI Router . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Add Angular.js Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Access Parent State from UI Router . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Configure Propel Page Header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Configure Breadcrumbs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Access Authenticated User Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Enable Localization in Jumpstart UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Add Static Assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Access the Organization Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Jumpstart Hands-On - Module Documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Load Propel BLOB Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

Control Propel Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Convert Propel Markdown . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

Configure Propel Widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Localize Propel Messages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

Configure Propel Search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Hello World Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

Content


3

Jumpstart Hands-On Legal Notices

Legal Notices

Warranty

The only warranties for Hewlett Packard Enterprise products and services are set forth in the express warranty statements accompanying suchproducts and services. Nothing herein should be construed as constituting an additional warranty. Hewlett Packard Enterprise shall not be liablefor technical or editorial errors or omissions contained herein. The information contained herein is subject to change without notice.

Restricted Rights Legend

Confidential computer software. Valid license from Hewlett Packard Enterprise required for possession, use or copying. Consistent with FAR12.211 and 12.212, Commercial Computer Software, Computer Software Documentation, and Technical Data for Commercial Items are licensedto the U.S. Government under vendor's standard commercial license.

Copyright Notice

© Copyright 2016 Hewlett Packard Enterprise Development LP

Trademark Notices

Adobe® is a trademark of Adobe Systems Incorporated.

Microsoft® and Windows® are U.S. registered trademarks of Microsoft Corporation.

UNIX® is a registered trademark of The Open Group.

Oracle and Java are registered trademarks of Oracle and/or its affiliates.

RED HAT READY™ Logo and RED HAT CERTIFIED PARTNER™ Logo are trademarks of Red Hat, Inc.

The OpenStack word mark and the Square O Design, together or apart, are trademarks or registered trademarks of OpenStack Foundation in theUnited States and other countries, and are used with the OpenStack Foundation’s permission.

Documentation UpdatesThe title page of this document contains the following identifying information:

Software Version number, which indicates the software version.Document Release Date, which changes each time the document is updated.Software Release Date, which indicates the release date of this version of the software.

To check for recent updates or to verify that you are using the most recent edition of a document, go to: https://softwaresupport.hpe.com/

This site requires that you register for an HPE Passport and to sign in. To register for an HPE Passport ID, click on the HPE SoftwareRegister Support site or click on the HPE Passport login page.Create an Account

You will also receive updated or new editions if you subscribe to the appropriate product support service. Contact your HPE sales representativefor details.

Use the function at the top of the page to find documentation, whitepapers, and other information sources. To learn more about using theSearchcustomer support site, go to:

https://softwaresupport.hpe.com/documents/10180/14684/HP_Software_Customer_Support_Handbook/

SupportVisit the HPE Software Support site at: https://softwaresupport.hpe.com/ .

This web site provides contact information and details about the products, services, and support that HPE Software offers.

HPE Software online support provides customer self-solve capabilities. It provides a fast and efficient way to access interactive technical supporttools needed to manage your business. As a valued support customer, you can benefit by using the support web site to:


https://softwaresupport.hp.com/

https://softwaresupport.hp.com/documents/10180/14684/HP_Software_Customer_Support_Handbook/

https://softwaresupport.hp.com/

4

Search for knowledge documents of interestSubmit and track support cases and enhancement requestsDownload software patchesManage support contractsLook up HPE support contactsReview information about available servicesEnter into discussions with other software customersResearch and register for software training

Most of the support areas require that you register as an HPE Passport user and to sign in. Many also require a support contract. To register foran HPE Passport ID, click on the HPE Support site or click on the HPE Passport login page.Register Create an Account

To find more information about access levels, go to: .https://softwaresupport.hpe.com/web/softwaresupport/access-levels

HPE Software Solutions Now accesses the HPE Software Solution and Integration Portal website. This site enables you to explore HPE ProductSolutions to meet your business needs, includes a full list of Integrations between HPE Products, as well as a listing of ITIL Processes. The URLfor this website is .https://www.hpe.com/us/en/solutions.html

DisclaimerHewlett Packard Enterprise Software provides full support for the product functionality as provided. Customer owns the necessary servicing andrepair of any development created with the SDK tool.


https://softwaresupport.hpe.com/web/softwaresupport/access-levels

https://www.hpe.com/us/en/solutions.html

5

Jumpstart Hands-On OverviewHPE Propel Jumpstart (Jumpstart) enables developers to quickly start developing web applications using common practices and conventions, aswell as reusable modules created by other Jumpstart developers. IT organizations will find unprecedented flexibility in customizing their HPEPropel Portal using Jumpstart, easily extending their portal with new content or by incorporating existing content from other sources. HPE PropelJumpstart provides scaffolding of server and UI modules to bootstrap implementation of new feature(s) or changes to existing feature(s).

Jumpstart is a toolset to help build single page web application as a collection of modules. It's based on open source specification (of npm andBower) and a set of development workflows leveraging module management capabilities of npm and Bower. Such an approach enablesdevelopers to leverage thousands of existing open source modules and really deliver value to their customers quickly. For example, application(s)built by HPE Propel Jumpstart will have built-in core features of HPE Propel applications as well as built-in support for common user interface. Tosimplify upgrading with customized applications, Jumpstart includes dependency management capabilities via semantic versioning in generatedapps.

General Jumpstart information can be found in the paper.Jumpstart

This paper supplements the paper with information specifically for using Jumpstart with HPE Propel.Jumpstart

Requirements

The following products must be installed and configured before you can use Jumpstart with HPE Propel:

Install Node.JS - Install and configure node.jsInstall npm - Install and configure Node Package Manager (npm)Install bower - Install and configure bowerInstall gulp - Install and configure gulp

Creation and Customization

The following sections describe how to create a Jumpstart page. They describe how to build a Jumpstart server and its components, how tointegrate modules, and how to customize:

Build a Jumpstart Server - How to build a Jumpstart serverGenerate Jumpstart Components - How to use the Yeoman generator to build Jumpstart componentsIntegrate New Modules into Jumpstart Application - How to integrate your module into PropelUse Angular UI Router - How to use the angular ui routerAdd Angular.js Templates - How to use HTML code templates in your modulesAccess Parent State from UI Router - How to access the parent state to provide headers and breadcrumbsConfigure Propel Page Header - How to configure the Propel page headerConfigure Breadcrumbs - How to add and configure breadcrumbsAccess Authenticated User Object - How to get access to and use the user objectEnable Localization in Jumpstart UI - How to localize your modulesAdd Static Assets - How to serve static assets such as pictures to your modulesAccess the Organization Object - How to access and use the organization object

Module Documentation

The following sections describe the modules (pre-built tools and libraries) that HPE Propel provides to add support such as breadcrumbs andheaders to your Jumpstart pages:

Load Propel BLOB Object - Module that loads and displays a BLOB (Binary Large OBject) object into a web-browserControl Propel Forms - Module that provides predefined controls that can be used in formsConvert Propel Markdown - Module that converts Markdown string text to HTML format and provides a WYSIWYG (What You See IsWhat You Get) editorConfigure Propel Widget - Module that creates and configures Widgets (the tiles that appear on the Launchpad)Localize Propel Messages - Module that provides localization of commonly used HPE Propel textConfigure Propel Search - Module that provides provides search capability

Example

The following section provides an example of the "Hello World" project specifically for Jumpstart with Propel:

Hello World Example


6

1. 2.

3.

4.

1. 2. 3.

Jumpstart Hands-On - RequirementsInstall Node.JSInstall npmInstall bowerInstall gulp

Install Node.JS

Node.JS

Node.js is an open source runtime environment that works across platforms. is used for both server-side and networking applications. Node.js is an asynchronous event driven framework. is designed to build fast, scalable network applications. uses JavaScript asNode.js Node.js Node.js

its scripting language. uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensiveNode.jsreal-time applications that run across distributed devices.

Node.js was chosen for Jumpstart because of its outstanding performance when hosting lightweight service APIs and web content. Additionallythere are emerging sets of standard development tools for web technologies built for (e.g., HTML, CSS, JavaScript).Node.js

The property of hosting lightweight service APIs and web content makes it convenient to have a single API with multiple APIs in it, whichNode.jsis how all the HPE Propel modules are structured. The single API is integrated with the back-end service of the specific module.

Installing Node.JS

There are two ways to install Node.JS.

Method 1: Use Node Version Manager

This allows you to install multiple versions of and switch between them as appropriate.Node.js

Linux

For the complete guide, visit .https://github.com/creationix/nvm

To install:

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bashnvm --version

This returns the current version, confirming the installation.

Windows

For complete guide visit .https://github.com/coreybutler/nvm-windows

To install:

Browse to https://github.com/coreybutler/nvm-windows/releases. Download the .nvm-setup.zip(If you choose, you can use the no-setup version, but it is not documented here.)Unzip and install NVM.

Be sure to read the for usage and caveats.Note: readmeOpen a terminal and enter the following command:

nvm version

This returns the version, confirming the installation.

If you receive the error : "ERROR open \settings.txt: The system cannot find the file specified"

Open using Admin Privilege.cmdRun cd c:\users\<username>\AppData\Roaming\nvm.Copy to .settings.txt c:


https://github.com/creationix/nvm

https://github.com/coreybutler/nvm-windows

https://github.com/coreybutler/nvm-windows/releases

https://github.com/coreybutler/nvm-windows/releases_

7

1.

2. 3. 4. 5. 6.

Method 2: Download v 4.2.2

Windows

Browse to and download the windows installer for v4.2.2 LTS.https://nodejs.org/dist/v4.2.2/

Open the file.node-v<version>-x64.msiClick Next for each of the prompts.On the custom setup screen, you may want to confirm that Add to PATH is set to "Will be installed on local hard drive".On the last prompt click Install.Open a command prompt and type:

c:> node -v

It should return v4.2.2, confirming the installation.

Linux/MacOS X

Use nvm (Node Version Manager) to install:

$ nvm install 4.2.2$ nvm use 4.2.2$ node -v

These commands should return v4.2.2, confirming the installation.

Install npm

Node Package Manager

Npm (Node Package Manager) is the default package manager for . npm manages dependencies between modules. AllNode.js Node.jsJumpstart modules that run on the server side are npm packages. It also helps in managing the customized api module dependencies createdwith Jumpstart, just like it does for general node modules.

Installing npm

Node comes with npm installed so you should have a version of npm. However, npm gets updated more frequently than Node does, so you'llwant to make sure it's the latest 2.x version.

The Jumpstart that was released with HPE Propel 2.20 (and prior) is only compatible with npm 2.x versions. The Jumpstart runtime is notcompatible with the npm 3.x "node_modules" directory structure.

Windows

Open a Node.js command prompt as an administrator and type:

c:\> npm install npm@^2.0.0 -gc:\> npm -v

This should return the latest 2.x version of npm confirming the installation.

Linux/MacOS X

If you installed from a NodeJS download:

$ sudo npm install npm@^2.0.0 -g

This is the correct version at the time of writing. Confirm that HPE Propel is still using this version. If not, you mayNOTICE:need a later version.


https://nodejs.org/dist/v4.2.2/

https://nodejs.org/dist/v4.2.2/

8

If you used nvm:

$ npm install npm@^2.0.0 -g$ npm -v

This should return the latest 2.x version of npm, confirming the installation.

NPM proxy configuration

Primary Instructions

On the command line type:

npm config set proxy <your http proxy>npm config set https-proxy <your https proxy>npm config set strict-ssl falsenpm config set @propel:registryhttps://propelrepo.com:443/artifactory/api/npm/jumpstart

Alternative Instructions

Open file (on Windows: ) and add the following entries:$HOME/.npmrc %HOMEPATH%.npmrc

proxy = <your http proxy>https-proxy = <your http proxy>strict-ssl = false@propel:registry = https://propelrepo.com:443/artifactory/api/npm/jumpstart

Installing npm packages

There are two ways to install npm packages: locally or globally. You choose which kind of installation to use based on how you want to use thepackage.

If you want to depend on the package from your own module using something like Node.js' , then you want to install locally, which is npmrequireinstall's default behavior. On the other hand, if you want to use it as a command line tool, something like the grunt CLI, then you want to install itglobally.

Installing npm packages locally

A package can be downloaded with the following command:

npm install <package_name>

This creates the directory in your current directory (if one doesn't exist yet), and downloads the package to that directory.node_modules

Which version of the package is installed?

If there is no file in the local directory, the latest version of the package is installed.package.json

If there is a file, the latest version satisfying the semantic versioning ( rule declared in for that package (ifpackage.json semver) package.jsonthere is any) is installed.

Installing npm packages globally

A package can be installed globally with the following command:


9

npm install -g <package_name>

Using the installed package

Once the package is in , you can use it in your code. For example, if you are creating a module, you can require it.node_modules Node.js

Uninstalling packages

Uninstalling local packages

You can remove a package from your directory using the following command:node_modules

npm uninstall <package_name>

Uninstalling global packages

Global packages can be uninstalled using the following command:

npm uninstall -g <package_name>

package.json

The best way to manage locally installed npm packages is to create a file.package.json

A file affords you these benefits:package.json

It serves as documentation for the packages that your project depends on.It allows you to specify the versions of the package that your project can use with rules.semverIt makes your build reproducible, which means that it's easier to share with other developers.

Requirements

As a bare minimum, a must have:package.json

"name"all lowercasedashes and underscores allowed

"version"

Other optional properties are:

mainscriptskeywordsauthorlicenserepositorybugshomepage

Creating a package.json

To create a run the following command:package.json

npm init

To learn more about the command's behavior, visit .Note: install https://docs.npmjs.com/cli/install


https://docs.npmjs.com/cli/install

10

This initates a command line questionaire that will conclude with the creation of a in the directory you initiated the command.package.json

You can get a default by running the following command:package.json

npm init --yes

This asks you to enter and uses the default values for the rest of the properties.author

Specifying Packages

To specify the packages that your project depends on, you need to list the packages you'd like to use in your file. There are twopackage.jsontypes of packages you can list:

"dependencies" - These packages are required by your application in production." - These packages are only needed for development and testing.devDependencies"

Manually editing your package.json

You can manually edit your . You need to create an attribute in the package object called that points to an object. Thispackage.json dependenciesobject holds attributes named after the packages you would like to use, and that point to a expression that specifies the versions of thesemverproject that are compatible with your project.

If you have you only need to use during local development, you follow the same instructions as above but in an attribute called dependencies.devDependencies

Creating Node Modules with Jumpstart

When you create a Jumpstart module using yeoman generator, you can specify the type of your module to be a node module by selecting the option. You can choose to select as well.Express middleware(Node.js) Configuration(.json)

Inside the node module you have files related to api, which are the binding nodeJS layer between the front-end and back-end.

You must manually add the node module in the .package.json

Now, to run your application for the first time, you must link all the node modules of your application with the main application, i.e., Launchpad orPortal-ui. To do that run the following command from your terminal pointing to the root directory of the main application, e.g.,

:Launchpad/Launchpad-app/

npm link <module name>

To have the node module dependencies of of your main application, e.g., installed, runpackage.json Launchpad/Launchpad-app/package.jsonthe following command from the terminal pointing to the root directory of the main application:

npm install

If correctly installed, this creates a shortcut of your node module within the folder in your main application root directory.node_modules

Reference Links

For more information about npm, visit .https://docs.npmjs.com/

For more information about semantic versioning, visit .http://semver.org

Install bower

Bower

Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, whileexposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system widedependencies, no dependencies are shared between different apps, and the dependency tree is flat, requiring only one version for each package,reducing page load to a minimum.


https://docs.npmjs.com/

http://semver.org

11

Bower runs over Git, and is package-agnostic. A packaged component can be made up of any type of asset, and uses any type of transport (e.g.,AMD, CommonJS, etc.).

While Bower is a relatively smaller repository when compared to npm, it hosts most popular web modules known today (e.g., angular.js, jQuery,etc.).

Installing Bower

Bower can be installed using npm, the Node Package Manager. If you don't already have npm installed, go to and download the relevantNode.jscopy of for your system. The npm program is included with the install of (see ).Node.js Node.js Install Node.JS

After you have npm installed, open Terminal (or Command Prompt) and enter the following command to install bower globally on your system:

npm install -g bower

Configuration

Perform the following to configure bower on your system:

Linux/MacOS: Create a file named in ..bowerrc $HOME

Windows: Create a file named in ..bowerrc %HOMEPATH%

All:Add the following to from the command line:GIT

git config --global url."https://github.com/".insteadOf [email protected]:git config --global url."https://".insteadOf git://

Add the following content to your :.bowerrc

{ "proxy" : "<OPTIONAL: your proxy here>", "https-proxy": "<OPTIONAL: your proxy here>", "resolvers": [ "bower-art-resolver" ], "registry":"https://propelrepo.com:443/artifactory/api/bower/jumpstart-bower-virt", "strict-ssl": false}

Usage

See complete command line reference at .https://bower.io/docs/api/

Finding Packages

There are two different ways that you can find Bower packages. Either use the online component directory found at , orhttps://bower.io/search/use the command line utility.

To search for packages on the command line, use the search command. Provide your search query in this format:

$ bower search <query>

For example, to search for packages that contain the word 'jquery' you could do the following:


https://nodejs.org/en/

http://bower.io/docs/api/

http://bower.io/search/

12

$ bower search jquery

This will return search results such as below.

jquery git://github.com/components/jquery.git jquery-ui git://github.com/components/jqueryui jquery.cookie git://github.com/carhartl/jquery-cookie.git jquery-placeholder git://github.com/mathiasbynens/jquery-placeholder.git jquery-file-upload git://github.com/blueimp/jQuery-File-Upload.git jasmine-jquery git://github.com/velesin/jasmine-jquery jquery.ui git://github.com/jquery/jquery-ui.git...

Each result displays the name of the package and a Git endpoint. You will need either the name or Git endpoint to install a package.

Integrating modules using Jumpstart

When you create a Jumpstart module using yeoman generator, you can specify the type of your module to be a bower module by selecting , .js and options..html image files

Inside bower module, you would have UI files, such as and files..js .html

You must manually add the node module to the file.bower.json

To manually edit :bower.json

You can manually edit your file. You need to create an attribute in the bower object called , that points to an object. Thisbower.json dependenciesobject holds attributes named after the packages you want to use and points to a expression that specifies what versions of that objectsemverare compatible with your project.

Now, to run your application for the first time, you must link all the bower modules of your application with the main application (i.e., Launchpad orPortal-ui). To do that, run the following command from your terminal, pointing to the root directory of the main application, e.g.,

:Launchpad/Launchpad-app/

bower link <module name>

To have the bower module dependencies of of your main application (e.g., installed, run thebower.json Launchpad/Launchpad-app/bower.json)following command from the terminal, pointing to the root directory of the main application:

bower install

If correctly installed, this will create a shortcut to your bower module within the folder in your main application root directory.bower_components

Installing packages and dependencies

To install listed in :dependencies bower.json

$ bower install

To install a and add it to :package bower.json

$ bower install <package> --save


13

1.

2.

3.

4.

To install a specific version of a package and add it to :bower.json

$ bower install <package>#<version> --save

Uninstalling packages

To uninstall a locally installed package:

$ bower uninstall <package-name>

Reference Links

For the most up-to-date information on Bower, visit .http://bower.io/For information on the Bower Module System, visit .https://github.com/bower/spec/blob/master/json.mdTo understand the difference between bower and npm, visit

.http://stackoverflow.com/questions/18641899/what-is-the-difference-between-bower-and-npm

Install gulp

Gulp

Gulp is a memory-based task runner written in JavaScript. Gulp is used to build system automating tasks such as minification and copying of allJavaScript files and static images. Gulp can watch files and automatically rerun a task when a file is updated.

Jumpstart defines an opinionated set of gulp tasks for developing, testing, integrating and deploying Jumpstart modules and applications. Many ofthese tasks promote best practices and help troubleshoot common problems during web development, to increase development efficiency.

To create a Jumpstart module, gulp is run on npm along with the yeoman generator. This requires the installation of the Jumpstart yeomangenerator. Then create a Jumpstart module, as per the procedure referenced in the npm documentation.

Getting Started

Perform the following steps to get started with gulp:

Install gulp globally: If you have previously installed a version of gulp globally, run to make sure an oldernpm rm --global gulp

version doesn't collide with . gulp-cliTo install gulp globally, run:

$ npm install --global gulp-cli

Install gulp locally: First, make sure that your file has been created. If it does not exist, manually create it or execute package.json npmin your project directory. Then you will need to install gulp to the local node_modules directory and save it as a dev dependency toinit

your projects's . package.jsonTo save the gulp locally and save an entry to the the following command: package.json use

$ npm install --save-dev gulp

Create a gulpfile.js at the root of your project:

var gulp = require('gulp'); gulp.task('default', function() { // place code for your default task here });


http://bower.io/

https://github.com/bower/spec/blob/master/json.md

http://stackoverflow.com/questions/18641899/what-is-the-difference-between-bower-and-npm

14

4. Run gulp:

$ gulp

The default task will run, but no additional tasks will run.

To run individual tasks, run .gulp <task> <next task...>

Brief Overview

Gulp is a streaming build system, meaning it will pipe and pass on the data being manipulated or used by its plugins. The plugins are intended toonly do one job each, so it's not uncommon to pass a single file through multiple plugins.

The gulp API is extremely light - containing 4 top level functions:

gulp.taskgulp.srcgulp.destgulp.watch

gulp.task defines your tasks. Its arguments are , (opt) and , where is a , is an of task names, and is the name deps fn name string deps array fn that performs your task. Since is optional, the two forms of are:function deps gulp.task

gulp.task('mytask', function() { //do these });gulp.task('dependenttask', ['mytask'], function() { //do these after 'mytask' is done. });

gulp.src points to the files you want to use. Its parameters are (text expression patterns) and an optional object. It uses forglobs options .pipechaining its output into other plugins.

gulp.dest points to the output folder you want to write files to.

gulp.src and are used to simply copy files. For example:gulp.dest

gulp.task('copyHtml', function() { // copy any html files in source/ to public/ gulp.src('source/*.html').pipe(gulp.dest('public')); });

gulp.watch has two main forms. Both forms return an that emits change events. The first form takes a glob, an optional optionsEventEmitterobject, and an array of tasks as its parameters. The second form takes the glob, an optional options object, and an optional callback that will runwhen a change is picked up.

You can add recipes to the , which is the config file used for invoking gulp tasks. See example recipes at gulpfile.js.https://github.com/gulpjs/gulp/tree/master/docs/recipes


https://github.com/gulpjs/gulp/tree/master/docs/recipes

15

Gulpfile.js( config File) 'use strict'; var gulp = require('gulp'); var runSequence = require('run-sequence'); // Enable gulp tasks for migration // This module defines and exports a gulp task for triggering // rollover on Jumpstart application. require('@propel/gulp-jumpstart-rollover')(); // Enable gulp tasks for engine // This jumpstart engine is for converting the sass files into css files. require('@propel/jumpstart-engine-angular-express-sass').expressAndAngular(); // Enable gulp tasks for web packaging // This module defines a gulp task for packaging Jumpstart web content // (Javascript, locales, styles, HTML templates etc.) for production deployment require('@propel/gulp-jumpstart-web-packager')(); // Enable gulp tasks for archiving // This module is responsible for archiving Jumpstart application which // includes Javascript, locales, styles, HTML templates etc. require('@propel/gulp-jumpstart-archiver')(); gulp.task('default', function(done) { runSequence('rollover', 'serve.dev', function() { done(); }); });

Reference Links

Check out the official Gulp website at .http://gulpjs.com/For more information, check out the Gulp tutorial at .https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js


http://gulpjs.com/

https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js

16

Jumpstart Hands-On - Creation and CustomizationBuild a Jumpstart ServerGenerate Jumpstart ComponentsIntegrate New Modules into Jumpstart ApplicationUse Angular UI RouterAdd Angular.js TemplatesAccess Parent State from UI RouterConfigure Propel Page HeaderConfigure BreadcrumbsAccess Authenticated User ObjectEnable Localization in Jumpstart UIAdd Static AssetsAccess the Organization Object

Build a Jumpstart Server

Jumpstart Server

The Jumpstart server is a jumpstart node module which contains the keyword in its content. The jumpstartexpress-server package.jsonconfiguration modules export an inquirer object array (see for more information). The inquirerhttps://github.com/SBoudrias/Inquirer.js#objectsuses the configuration array to ask questions of the user regarding the configuration of the new Jumpstart server.

The server module exports an instance of the Express.js server. It emits a series of lifecycle events which serve as dynamic mounting points forthe other middleware modules (identified with the keyword). The following lifecycle events are dispatched in a specificexpress-middlewareorder when the server is instantiated:

Loading Priority Description

setup Dispatched after Express.js server instance is created.

init Dispatched after basic server configuration completes (when the configuration is loaded/applied by the server).

session Dispatched after session has been set up.

auth Dispatched after authentication has been set up.

defaults Dispatched after setup is complete.

As shown in the following example, dispatching the event is the responsibility of each server. Every event must be dispatched only once and inthe order specified. It is important to also pass the server object when dispatching these events. The following is the simplest server module thatcan be created:


https://github.com/SBoudrias/Inquirer.js#objects

17

'use strict'; var assert = require('assert'); var express = require('express'); module.exports = function() { assert(this.config, '`loader.config` is not defined'); assert(this.server, '`loader.server` is not defined'); // This will be covered later var pkg = require('./package'); var opts = this.config.getConfig(pkg.name); assert(opts.env, 'Option `env` is not set.'); var app = this.app = express(); var server = this.server; server.on('request', app); /** * ======================================= * Server lifecycle: setup */ this.emit(this.LifeCycle.setup, app, server); /** * ======================================= * Server lifecycle: init */ this.emit(this.LifeCycle.init, app, server); /** * ======================================= * Server lifecycle: session set */ this.emit(this.LifeCycle.session, app, server); /** * ======================================= * Server lifecycle: auth set */ this.emit(this.LifeCycle.auth, app, server); return server; };

A Propel Jumpstart application uses the module as its module.@propel/idm-express express-server

In the server module's file, the keyword indicates to Jumpstart that this is the server module.package.json express-server


18

{ "name": "my-server", "keywords": [ "express-server" ] }

Jumpstart provides a method for collecting user input for module configuration. Configurable module(s) are identified by the keyword in their files.jumpstart-configurable package.json

{ "name": "some-module", "keywords": [ "jumpstart-configurable" ] }

For example, this 'server' module's has both the keywords and .package.json jumpstart-configurable express-server

Path: @/idm-express/package.json

{ "name": "@propel/idm-express", "version": "0.9.0", "description": "Jumpstart server with IdM authentication", "main": "index", "engines": { "node": ">=0.10.0" }, "scripts": { "test": "gulp test:coverage" }, "author": "[email protected]", "keywords": [ "jumpstart-configurable", "express-server" ],

Note: Versions change frequently. Make sure to use the correct version for your release.


19

"dependencies": { "@propel/express-safe-memorystore": "^0.2.0", "@propel/idm": "^0.3.14", "@propel/msvc-util": "^0.5.3", "@propel/passport-idm": "^0.3.4", "compression": "^1.0.7", "cookie-parser": "^1.1.0", "errorhandler": "^1.0.2", "express": "^4.4.4", "express-session": "^1.3.1", "passport": "^0.2.0", "promise": "^7.0.4", "sugar": "^1.4.1", "validator": "^3.16.0" }, "devDependencies": { "chai": "^1.9.1", "chai-as-promised": "^4.1.1", "gulp": "^3.8.7", "gulp-exit": "0.0.2", "gulp-istanbul": "^0.5.0", "gulp-js-prettify": "^0.1.0", "gulp-jshint": "^1.9.0", "gulp-load-plugins": "^0.7.1", "gulp-mocha": "^1.0.0", "jshint-stylish": "^1.0.0", "mocha": "^1.21.4", "sinon": "^1.10.3", "sinon-chai": "^2.5.0" } }

Here the keyword indicates to Jumpstart that this module exports a set of user configurable values. Each module isjumpstart-configurableresponsible for defining and exporting its own configuration, if it has one. For example, if a module needs a session timeout value from the user, itmust define and export this configuration. The configuration is defined and exported as follows:

some-module\ config\ index.js package.json index.js

In the case of the idm-express server for the Propel Jumpstart application:

server\ config\ index.js package.json index.js

By default, Jumpstart looks for configuration information in the folder. A custom path to the configuration information can be specified byconfigappending it to the keyword as shown here:jumpstart-configurable


20

{ "name": "custom-module", "keywords": [ "jumpstart-configurable:myConfig/content" ... ] }

In this example, Jumpstart will load the configuration settings by resolving the path , which could be a content.js or an npm/myConfig/contentpackage folder.

Jumpstart uses Inquirer.js to define and export the module configuration.

Referring back to the earlier example on prompting the user for the session timeout value, might look as follows:config/index.js

'use strict'; // use a helper library for validating the input var validator = require('validator'); module.exports = [{ type: 'input', name: 'sessionTimeout', message: 'Please enter the session timeout value (in milleseconds)', default: 1800000, validate: function(answer) { if (validator.isNumeric(answer)) { answer = answer * 1; return (answer > 0) ? true : false; } else { return false; } } }];

Run the command from the Jumpstart application. The configurations are presented to the user as a list of guided questions via agulp configcommand line interface. The answers are stored in the file (found in the same directory where you ran gulp config). Run the command app.json

from the Jumpstart generated application to launch the configuration . After the configuration is done, Jumpstart willgulp config gulp configstore all user inputs in the file.app.json

{ "some-module": { "sessionTimeout": 600000 } }

The following shows the of the Propel Jumpstart server:@/config/index.js

You can specify a default value as well as validate the user input.Note:


21

'use strict'; var validator = require('validator'); module.exports = [{ type: 'list', name: 'env', message: 'Please select an environment (`env`)', default: 'development', choices: [{ name: 'development' }, { name: 'production' }] } }]; module.exports.packageName = 'server';

The following is the generated by on the launchpad application created which uses the idm-express server.app.json gulp configPath: @/launchpad/launchpad-app/app.json

{ "logger": { "consoleEnabled": true, "consoleLevel": "info", "consoleColorize": true, "consolePrettyPrint": true, "fileEnabled": true, "fileLevel": "info", "fileLocation": "logs/server.log", "fileMaxSize": 10485760, "fileMaxFiles": 10 },

Note: The following is an example of an file. Your actual file contents will vary.app.json


22

"server": { "env": "development", "https_enabled": false, "defaultTenantName": "CONSUMER", "contextPath": "/", "idmUrl": "https://<YOUR PROPEL INSTANCE>:9600", "idmContextPath": "/idm-service", "idmReturnUrl": "http://localhost:9000", "idmUsername": "idmTransportUser", "idmPassword": "enc(abcdefghijklmnopqrstuvwxyz)", "idmStrictSsl": false, "idmSecureProtocol": "TLSv1_method", "idmCa": "$caPath$", "ssoEntryPoint": true }, "localization": { "localeCookieEnabled": true, "localeCookieName": "LOCALE", "rtlConfig": "conf/rtl.json" }, "help": { "entryPage": "Propel_Consumer_Help_CSH.htm", "defaultLocale": "en_US", "pathContent": "dist/help" }, "packager": { "uglifyJs": true }, "gulp": { "main": "serve", "pathTemp": ".tmp", "pathDist": "dist", "pathTemplates": "templates", "pathAssets": "assets", "pathStyles": "styles", "port": "9000", "syncPort": "9090", "browser": "default" }}

In each module, you can enable a module to access a configuration by doing the following:

'use strict'; module.exports = function() { var optsFile = require('./myModuleOptions.js'); // loads the package.json opts = this.config.getConfig('myModuleOptions'); var myOpt = opts.myOption; // myOpt will be set to "value" var myOpt1 = opts.myOption1; // myOpt1 will be set to true}


23

This code will load the following configuration example:

"myModuleOptions" = { "myOption": "value", "myOption1": true }

Generate Jumpstart Components

Jumpstart Yeoman Generator

The Jumpstart generator is a yeoman generator (see for more information).This generator is used to create ahttp://yeoman.io/generator/scaffolding system for a new UI/server module for a new Jumpstart application.

Prerequisite Configuration Setup

Add the following line to your file:~/.npmrc

@propel:registry=https://propelrepo.com:443/artifactory/api/npm/jumpstart

Add the following to your file:~/.gitconfig

[url "https://github.com"] insteadOf = git://github.com

Getting started

yo is the Yeoman command line utility allowing the creation of projects utilizing scaffolding templates (referred to as generators). Yo is installedusing npm.

Before installing the Jumpstart yeoman generator, execute the following command to install yo and gulp (see for more information).https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

npm install -g yo gulp

To install the Jumpstart yeoman generator, run the following command:

npm install -g @propel/generator-jumpstart

Now you can generate a Jumpstart bower or npm module by running the following command:

myModuleOptions.js

This tells npm to go to HPE Propel's public npm repository for all npm modules namespaced with @propel.Note:

INote: f HPE's proxy settings are not applicable, you must refer to your own proxy hostname/port.


http://yeoman.io/generator/

https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

24

yo @propel/jumpstart

You should see a CLI (Command Line Interface) to create a Jumpstart UI/Server Module. (See below for a screenshot.)

The available options are:

Jumpstart ModuleJumpstart ApplicationJumpstart Server

Jumpstart Module

A Jumpstart module can be either a Bower package or an npm package, with specific keywords (in and ) to indicate thebower.json package.jsonmodule capabilities. Jumpstart follows the standards outlined for and , and does not introduce any custom attributes.bower.json package.jsonKeywords help the Jumpstart engine module integrate, or bundle, each Jumpstart module into a Jumpstart application for deployment. AJumpstart module can have more than one role, and it can have both and content for the browser and Node.js layer.package.json bower.jsonThis option creates a Jumpstart Module.

You are asked to specify the module name and then the type of modules you want to implement.

Angular.js UI Logic (.js)

A Jumpstart module (bower) contains Angular.js code. An package must contain JavaScript files that will run in a browser. Allangular-uiJavaScript file entries should be included in the main property in .bower.json

When this option is selected, yo generates the following:

app - Folder that contains the index.js. index.js has the controller definition and the routing to the .main.htmlbower_components - Directory that contains all bower modules dependencies.node_modules - Folder that holds all npm modules dependencies.test - Folder that contains testing files for the module.bower.json - bower configuration file for listing all bower dependencies used for Launchpad. Official specification:

.https://github.com/bower/specgulpfile.js - Used for invoking gulp tasks.package.json - npm configuration file for listing all npm modules dependencies used for Launchpad. Official specification:

is the default keyword if no other keyword is specified.Note: angular-ui


https://github.com/bower/spec

25

.https://docs.npmjs.com/files/package.json

Angular.js Template (.html)

A Jumpstart module (bower) that holds HTML templates. It contains a folder called templates under the project root. The project root can containany folder/file structure. The primary targets are the .html files that should contain angular template formats. The folder/file structure in thetemplates folder is preserved when bundled into a Jumpstart application, so that other modules that contain angular logic can refer to the templatefile reliably.


templates - Folder that contains all the html templates when main.html is generated.bower_components - Directory that contains all bower modules dependencies.node_modules - Folder that holds all npm modules dependencies.test - Folder that contains testing files for the module.bower.json - bower configuration file for listing all bower dependencies used for Launchpad. Official specification:



Express Middleware (Node.js)

A Jumpstart module (npm) that conforms to the Jumpstart server module specification (i.e., Jumpstart server lifecycle) and exports an Express.jsmiddleware.

You are asked to set a loading priority for your middleware.

Loading Priority Description

setup Dispatched after the Express.js server instance is created.

init Dispatched after the basic server configuration completes (when the configuration is loaded/applied by the server).

session Dispatched after the session has been set up.

auth Dispatched after the authentication has been set up.

defaults Dispatched after the setup is complete.


lib - Folder that contains the index.js for your middleware module.bower_components - Directory that contains all bower modules dependencies.node_modules - Folder that holds all npm modules dependencies.test - Folder that contains testing files for the module.bower.json - bower configuration file for listing all bower dependencies used for Launchpad. Official specification:



UI Assets (e.g., image files)

As the name suggests, this option includes a folder (assets) for all your image files.

Configuration (.json)

This option creates the configuration for the module. Please refer to for how to configure the server module.Build a Jumpstart Server

Jumpstart Application

A Jumpstart application is a simple wrapper that is composed of a collection of Jumpstart modules and open source modules. It is a deployableapplication that performs no function of its own. Instead, the application includes dependencies on one or more modules, each of which performsone or more functions. A Jumpstart application declares module dependencies through either npm ( ) or Bower ( ). Apackage.json bower.json


https://docs.npmjs.com/files/package.json





26

Jumpstart application is an npm package, and must include keyword (keywords field in file).jumpstart-app package.json

A Jumpstart application depends on core Jumpstart modules that provide development workflows in the form of gulp tasks. These tasks includepacking web content, minifying/uglifying JavaScript, compiling SASS files into CSS, etc.


bower_components - Directory that contains all bower modules dependencies.node_modules - Folder that holds all npm modules dependencies.test - Folder that contains testing files for the module.bower.json - bower configuration file for listing all bower dependencies used for Launchpad. Official specification:



Jumpstart Server

A Jumpstart server is a Jumpstart module with the role keyword in its content. It implements the Jumpstartexpress-server package.jsonserver specification. To configure the server module refer to .Build a Jumpstart Server

When this option is selected, generates the following:yo

node_modules - Folder that holds all npm modules dependencies.test - Folder that contains testing files for the module.bower.json - bower configuration file for listing all bower dependencies used for Launchpad. Official specification:






27


Integrate New Modules into Jumpstart Application

How to integrate new Jumpstart UI/Server modules into existing Jumpstart application

This section shows how to integrate the helloworld application into an existing Jumpstart Application. To create a new Jumpstart UI/Servermodule please refer to .Generate Jumpstart Components

Prerequisite Configuration Setup

Add the following line to your file:~/.npmrc

@propel:registry=https://propelrepo.com:443/artifactory/api/npm/jumpstart

Add the following to your file:~/.gitconfig

[url "https://github.com"] insteadOf = git://github.com

Install :bower-art-resolver

npm install -g bower-art-resolver

Add the following lines to your file:~/.bowerrc

{ "resolver": [ "bower-art-resolver" ], "registry": "https://propelrepo.com:443/artifactory/api/bower/jumpstart-bower-virt", "strict-ssl": false }

Development Environment

Bower.json

For the first time integration, you must follow these steps:

On which is on launchpad's home directory, add your ui module as a dependency. Here we are using "Helloworld-ui" as anbower.jsonexample. You will use your module name when integrating your Jumpstart app."Helloworld-ui" : "Helloworld-ui"Open the Launchpad-app, run the command in terminal as bower link , and then your module dependencies will behelloworld-uilinked along with your module.helloworld-ui

: You need acess to the helloworld application to follow these steps (refer to ).Note Hello World Example

This tells npm to go to HPE Propel's public npm repository for all npm modules namespaced with @propel.Note:



28

Run from launchpad-app.bower installCheck for the bower components. In bower components you should have a shortcut to the ui module, which is responsible for UI to beloaded. If you don't see the shortcut, it's not linked.

Package.json

For the first time integration, you need to follow these steps:

On which is on launchpad's home directory, add your api module as a dependency. For example: package.json"Helloworld-api" : "Helloworld-api"Open the Launchpad-app, run the command , then your module dependencies will be linked along withnpm link helloworld-apiyour module.helloworld-apiRun from launchpad-app.npm installCheck for the node modules. Inside the node module you should have files related to api, which are responsible for binding the nodeJSlayer between the front-end and back-end.

Place the following configuration under :conf/dashboard.json

{ "id": "dashboard-tile_helloworld", "label": "Hello World", "role": [ "CONTENT_ADMIN", "CONSUMER", "SUPPORT" ], "backgroundImage": "assets/propel-endpoints/images/app-diagnostics.png", "link": "http://localhost:9000/helloworld/home" }

Place the following configuration under :conf/endpoints.json

{ "name": "contacts-ui", "role": [], "label": "Contact", "icon": "assets/propel-endpoints/images/app-diagnostics.png", "helpUrl": "https://server:9800/help/q/diagnostics_intro_Propel", "enabled": true, "url": { "ui": "http://localhost:9000/helloworld/home" }, "licenseTypes": [ "20642", "20644", "20500", "20504" ] }

Production Environment

The new Jumpstart UI and server module should already be published in the node and bower repository.

Run the following command to install (UI module):helloworld-ui


29

bower install @propel/helloworld-ui

Run the following command (server module):

npm install @propel/helloworld-api

Place the following configuration under :conf/dashboard.json

{ "id": "dashboard-tile_helloworld", "label": "Hello World", "role": [ "CONTENT_ADMIN", "CONSUMER", "SUPPORT" ], "backgroundImage": "assets/propel-endpoints/images/app-diagnostics.png", "link": "http://localhost:9000/helloworld/home" }

Place the following configuration under :conf/endpoints.json

{ "name": "contacts-ui", "role": [], "label": "Contact", "icon": "assets/propel-endpoints/images/app-diagnostics.png", "helpUrl": "https://server:9800/help/q/diagnostics_intro_Propel", "enabled": true, "url": { "ui": "http://localhost:9000/helloworld/home" }, "licenseTypes": [ "20642", "20644", "20500", "20504" ] }

Now, let's repackage the browser content and restart the server:


30

// repackage the browser content gulp dist // restart the Launchpad systemctl restart launchpad service launchpad stop service launchpad start

Use Angular UI Router

Angular UI Router

AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the service in the Angular module, which is organized around URL routes, UI-Router is organized around states, which may$route ngRoute

optionally have routes, as well as other behavior, attached.

States are bound to named, nested and parallel views, allowing you to powerfully manage your application's interface.

Getting Started

To include UI-router in your application, you must add dependency to your :idm-angular-ui-router bower.json

"idm-angular-ui-router": "Link to the idm-angular-ui-router url"

Nested States and Views

Most of UI-Router's power is in its ability to nest states and views.

First, follow the setup instructions detailed above.Then, add a directive to the of your app:ui-view <body />

 <body> <div ui-view></div>  <a ui-sref="state1">State 1</a> <a ui-sref="state2">State 2</a> </body>

You will notice we also added some links with directives (see ui-sref for more information). In addition to managing state transitions,https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

if the corresponding state has a URL this directive auto-generates the attribute of the element it is attached to. Next we'll addhref <a />some templates. These will plug into the within . Notice that they have their own as well. That is the key toui-view index.html ui-viewnesting states and views.


https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

31

 <h1>State 1</h1> <hr/> <a ui-sref="state1.list">Show List</a> <div ui-view></div> <h1>State 2</h1> <hr/> <a ui-sref="state2.list">Show List</a> <div ui-view></div>

Next, we will add some child templates. These plug into the of their parent state templates.ui-view

 <h3>List of State 1 Items</h3> <ul> <li ng-repeat="item in items">{{ item }}</li> </ul> <h3>List of State 2 Things</h3> <ul> <li ng-repeat="thing in things">{{ thing }}</li> </ul>

Finally, we will connect it all with . Set up your states in the module config, as in the following:$stateProvider


32

myApp.config(function($stateProvider, $urlRouterProvider) { // // For any unmatched url, redirect to /state1 $urlRouterProvider.otherwise("/state1"); // // Now set up the states $stateProvider .state('state1', { url: "/state1", templateUrl: "partials/state1.html" }) .state('state1.list', { url: "/list", templateUrl: "partials/state1.list.html", controller: function($scope) { $scope.items = ["A", "List", "Of", "Items"]; } }) .state('state2', { url: "/state2", templateUrl: "partials/state2.html" }) .state('state2.list', { url: "/list", templateUrl: "partials/state2.list.html", controller: function($scope) { $scope.things = ["A", "Set", "Of", "Things"]; } }); });

For more information, see .https://github.com/angular-ui/ui-router/wiki

Multiple and Named Views (Not possible with ngRoute)

Another great feature is the ability to have multiple s per template.ui-view

Follow the setup instructions detailed above.Add one or more to your app, and give them names.ui-view

 <body> <div ui-view="viewA"></div> <div ui-view="viewB"></div>  <a ui-sref="route1">Route 1</a> <a ui-sref="route2">Route 2</a> </body>

Set up your in the module configuration:states

Note: While multiple parallel views are a powerful feature, you'll often be able to manage your interfaces more effectively by nestingyour views, and pairing those views with nested states.


https://github.com/angular-ui/ui-router/wiki

33

myApp.config(function($stateProvider) { $stateProvider .state('index', { url: "", views: { "viewA": { template: "index.viewA" }, "viewB": { template: "index.viewB" } } }) .state('route1', { url: "/route1", views: { "viewA": { template: "route1.viewA" }, "viewB": { template: "route1.viewB" } } }) .state('route2', { url: "/route2", views: { "viewA": { template: "route2.viewA" }, "viewB": { template: "route2.viewB" } } }) });

Setting up a parent and child states

This is an example showing an abstract parent state and child states where the properties of the parent are inherited by the child states. Forexample, the url of the child state is mounted on the url of the parent state. Refer to .Hello World Example

'/helloworld/home'.

In the following example, the "helloworld" state explicitly uses the "propel" state that was provided by the propel-layout module as its parent. Thenwe use dot notation to implicilty use the "helloworld" state as the parent to the "helloworld.home" and "helloworld.list" states.

git - The dot notation can be read as "parent.child".

$stateProvider .state('helloworld', { abstract: true, parent: 'propel', url: '/helloworld', template: '<ui-view>', data: { title: "helloworld", app: { name: 'contacts-ui', transparentHeader: false }, } })


34

.state('helloworld.home', { url: '/home', templateUrl: '/templates/helloworld-ui/main.html', controller: 'HelloworldUiMainCtrl', data: { breadcrumbs: [ { name: 'Home', state: 'helloworld.home' } ] } }) .state('helloworld.list', { url: '/contacts', templateUrl: '/templates/helloworld-ui/list.html', controller: 'ContactListCtrl', data: { breadcrumbs: [ { name: 'Home', state: 'helloworld.home' }, { name: 'Contacts', state: 'helloworld.list' } ] } }); });

Reference Links

For more information, see .https://github.com/angular-ui/ui-router

Add Angular.js Templates

Templates

Use the following Jumpstart Yeoman generator command to create a module:


It will ask you to select the types your module would like to implement.

Select (.html).Angular.js Template

This will allow you to use Angular.js HTML template files.

A Template is a partial HTML file. It contains HTML, but is missing tags such as , , and . It is aDefinition: <html> <head> <body>partial HTML file that is used by Angular.js to create a full HTML page.


https://github.com/angular-ui/ui-router

35

In the module folder, a file is created with the keyword :bower.json angular-template

{ "name": "helloworld-ui", "version": "0.1.0", "keywords": [ ..., "angular-template", ... ], ... }

The yeoman generator creates a folder in your module. This is where the HTML partitions are served by the Jumpstart application.templates

Usage

When you run from your application server directory, the gulp tasks defined in the jumpstart-engine-angular-express-sass module builds a gulp directory in your application server folder. These generated files map to a route on your server..tmp /templates/yourmodule/

Access Parent State from UI Router

Propel-Layout

The Propel-layout module provides the base layout for any page integrated into a Propel application. It provides the header, the footer, and ablank canvas in between for angular templates. This module uses states defined using the angular UI-Router.

Propel UI-Router states

The following states are provided by Propel-layout:

"Propel": Parent state is the default state that provides the header, sub-header (breadcrumbs), and footer."Propel-custom": Parent state that provides a blank page.

Both states provide the same constants and resolutions.

Bower Configuration

To use the Propel parent state, you must first add the module to the dependencies section in the .propel-layout bower.json

The following shell command adds the module to the file:bower.json

$ bower install propel-layout --save

The new module should appear in the dependencies section.

bower.json

Note: Versions change frequently. Make sure to use the correct version for your release.


36

"dependencies": { "angular": "~1.4.7", "angular-cookies": "~1.4.7", ... "propel-layout": "propel-layout": "^0.5.5", ... }

UI Router State Config

You must define an abstract state that uses "propel" as its parent state. An abstract state is a state that cannot be rendered. Its sole purpose is toprovide functionality that is inherited by child states. Using "propel" as a parent allows you to use all of the states and their resolutions in

. Any templates defined in your project are rendered between the Propel header (see ) and thepropel-layout Configure Propel Page HeaderPropel footer. When parenting from the "propel-custom" state, the Propel header and footer are not added and your template uses the entirepage.

Propel Parent Example

angular.module('helloworldModule', []) .config(['$stateProvider', function($stateProvider) { // Create helloworld abstract state $stateProvider.state('helloworld', { abstract: true, parent: 'propel', template: '<ui-view></ui-view>', controllerAs: 'vm' }) });

Propel-custom Example

angular.module('helloworldModule', []) .config(['$stateProvider', function($stateProvider) { $stateProvider .state('custom', { abstract: true, parent: 'propel-custom', template: '<ui-view></ui-view>' }); }])

See the demo app routes for an example of how to configure your routes.Hello World Example

Constants

These constants provide easy access to various common locations in Propel.

Constant Description

HOME_ENDPOINT This is the URL for the main launchpad app.

LICENSE_ENDPOINT This is the URL for the licensing.

CART_ENDPOINT This is the URL for the Shopping Cart app.


37

ORDER_ENDPOINT This is the URL for the Order app.

APPROVAL_ENDPOINT This is the URL for the managerial approval app.

SUPPORT_ENDPOINT This is the URL for the support app.

Resolutions

The angular-ui router will resolve certain variables that may be useful in your app. See the angular-ui router documentation for more onresolutions. The Propel-layout module provides the following resolutions.

Resolution Description

tenant Returns a Promise that fetches the current tenant.

Access Authenticated User Object Returns the current user object.

endpoints Returns all of the registered endpoints.

debug Sets the debug to enabled or disabled.

Controller Usage Example

The Propel resolutions are added to the $inject service provided by angular and can be injected into your controllers.

.controller('HelloworldHomeCtrl', ['user', function(user) { var vm = this; vm.username = user.name; }])

References

angular-ui-router - https://github.com/angular-ui/ui-router/wikiui-router states - https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

Configure Propel Page Header

Propel Header

The header is a fixed region at the top of the screen. When the propel-layout module is included, the header will contain the Propel icon, thecustom icon for your module, the display name for your module, the user options icon and breadcrumbs.

Bower Configuration

To use the Propel parent state, you must first add the propel-layout module to the dependencies section in the file:bower.json


https://github.com/angular-ui/ui-router/wiki

https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

38

"dependencies": { "angular": "~1.4.7", "angular-cookies": "~1.4.7", ... "propel-layout": "~0.5.2", ... }

State and Launchpad Configurations

You provide a configuration object to the method that will tell the header how to render itself.$stateProvider.state()

These properties are available for the config object's .data.app

Property Type Description

name STRING - default launchpad

Name of the current application (helps determine logos, etc., from endpoints).

transparentHeader BOOLEAN - default false

Specifies whether the header will have a transparent background (and be positionedabsolutely).

hideFooter BOOLEAN - default false

Specifies whether to hide the footer.

Example 1: With transparentHeader: false

Code Used:

angular.module('helloworld', ['propel-layout']) .config(['$stateProvider', function($stateProvider) { $stateProvider .state('file', { url: '/helloworld', template: '<ui-view/>', parent: 'propel', abstract: true, data: { title: 'Name of your title', app: { name: "helloworld", transparentHeader: false, hideFooter: true, } } }]);

You must parent your state off of the parent to use the Propel header with the app configuration.Note: propel


39

Example 2: With transparentHeader: true

Code Used:

angular.module('helloworld-ui', ["ui.router", 'propel-layout']) .config(function($urlRouterProvider, $stateProvider) { $urlRouterProvider.otherwise("helloworld/home"); $stateProvider .state('file', { url: '/helloworld', template: '<ui-view/>', parent: 'your application name', abstract: true, data: { title: 'Name of your title', app: { name: "helloworld", transparentHeader: true, hideFooter: true, } } })

Configuration Properties

The following configuration properties are available in for propel-header. From the example above, the endpoints.json name: "helloworld"

configuration in the state file maps to the configuration in Launchpad's file.name: "helloworld" endpoints.json

Property Description

name Name of the current application.

roles Application access restriction.

label Name in header.

icon Help icon url.

helpUrl url to navigate to for help documentation.

enabled Specifies whether to enable or disable the application.

url Application url.


40

licenseTypes License types.

Code Used:This section of the code is used in the Launchpad's configuration file for integrating a custom module. endpoints.json

[ { "name": "helloworld", "role": [], "label": "Contacts", "icon": "assets/propel-endpoints/images/app-help.png", "helpUrl": "http://localhost:9000/help/q/launchpad_intro", "enabled": true, "url": { "ui": "http://localhost:9000/helloworld" }, "licenseTypes": [ "20642", "20644", "20500" ] } ]

Dependencies

angular - https://code.angularjs.org/1.3.4/docs/apiangular-ui-router - https://github.com/angular-ui/ui-routersugar - http://sugarjs.com/apiangular-foundation - https://github.com/pineconellc/angular-foundation

This package also depends on the following HPE Propel/IDM-based bower packages:

idm-angular-corepropel-foundation-themepropel-extensions

These packages are automatically installed with the . You can also install them manually by running the followingHello World Examplecommands:

bower install idm-angular-corebower install propel-foundation-themebower install propel-extensions

Configure Breadcrumbs

Breadcrumbs

Breadcrumb trails on the page indicate a user's current page location in the site hierarchy. A user can navigate all the(header)[header.md]way up in the site hierarchy, or one level at a time by starting from the last breadcrumb in the breadcrumb trail.

Breadcrumbs enable a user to easily navigate back to locations within the current module. A Breadcrumb trail appears in the page header asillustrated by the following example:


https://code.angularjs.org/1.3.4/docs/api


http://sugarjs.com/api

https://github.com/pineconellc/angular-foundation

41

Breadcrumbs require that is included in your bower configuration and that your modules have a parent of propel-layout propel (see ).Access Parent State from UI Router

Properties

Breadcrumbs use the following properties:

Property Description

name Title of the breadcrumb.

state State to invoke when the user clicks on the breadcrumb.

url url to navigate to when the user clicks on the breadcrumb.

Code Used:

The following example illustrates a breadcrumb configuration that generates a breadcrumb trail that looks like "Home / Contacts".

In this case, the first object in the breadcrumb definition creates the "Home" location and, when it is clicked, it navigates to the helloworld.homestate. The second object in the breadcrumb definition creates the "Contacts" location. When it is clicked, it navigates to the helloworld.contactstate.

breadcrumbs: [{ name: 'Home', state: 'helloworld.home' }, { name: 'Contacts', state: 'helloworld.contact' }]

Example

This example shows how the breadcrumb is integrated into the state definition as a static breadcrumb. Breadcrumbs can also be dynamicallygenerated in JavaScript by modifying the with a new array.$state.current.data.breadcrumbs

"Home / Contacts" is the breadcrumb.Note:


42

.state('helloworld.contact', { url: '/contact', templateUrl: '/templates/contacts-ui/contacts.html', controller: 'contactsCtrl', controllerAs: 'vm', data: { breadcrumbs: [{ name: 'Home', state: 'helloworld.home' }, { name: 'Contacts', state: 'helloworld.contact' }] } })

Dependencies

angular - https://code.angularjs.org/1.3.4/docs/apiangular-ui-router - https://github.com/angular-ui/ui-router

Access Authenticated User Object

Authenticated User Object Information

This section describes how user information can be accessed within the module created using .authenticated Propel launchpad

The authenticated user object is resolved in the state which is defined in the module.propel-common propel-layout

The user must include in the dependencies of your module's and inject into aspropel-layout bower.json propel-layout helloworld-uia dependency in order to provide access to authenticated user object.

bower.json entry

dependencies: { "propel-layout": "~0.3.3" }

Since the authenticated user object is resolved in , the same authentication is inherited by and available to all itspropel-commonchild/nested-child states.

In this example, propel is parent to helloworld.

$stateProvider.state('propel-common', { abstract: true, resolve: { user: function getUser(idmAuth) { return idmAuth().then(function(idmObj) { return idmObj.user; }); },




43

$stateProvider.state('helloworld', { parent: 'propel', url: '/helloworld', template: '<ui-view></ui-view>', controllerAs: 'vm' })

The user object which is resolved in state object, can be passed as a parameter to the HelloWorld controller and access thepropel-commonauthenticated user object properties.

angular.module('helloworld-ui').controller('HelloWorldCtrl', function (user) { var vm = this; vm.userName = user.name; vm.content = 'Home Page'; });

The authenticated user name can be accessed within html as shown below.

Welcome to vm.userName

The user object has properties including etc., authenticated flag name, groups the user associated with, roles,

Sample user object below

{ "authenticated": true, "id": "bec647b5-ea34-4171-9583-590a2fe0a46b", "name": "orgadmin", "groups": [{ "id": "propel_users_group_id", "name": "propel-users", "displayName": "Propel Users", " metadata": {} }], "roles": [{ "id": "08258bc1-09c1-4654-8b33-a54d2562c743", "name": "CONSUMER" }] }

Enable Localization in Jumpstart UI

How to enable Localization

To enable localization on a Jumpstart UI module, add , under resolutions, in the of your Jumpstart UIjumpstart-angular-i18n bower.jsonmodule.


44

In Propel, all locale files are under the folder of each module.locales

To manually edit :bower.json

You can manually edit your . You need to edit an attribute in the bower object called , that points to an object. This objectbower.json dependencieswill hold attributes named after the packages you'd like to use, that point to a expression that specifies what versions of that project aresemvercompatible with your project.

{ "name": "helloworld-ui", "version": "0.1.0", "keywords": [ "angular-ui", "angular-template", "jumpstart-asset" ], "dependencies": { "angular": "^1.3.15", "angular-ui-router": "^0.2.15", "jumpstart-angular-i18n": "^0.2.0", }, "devDependencies": { "angular-mocks": "^1.3.15" }, "ignore": [ "*/.", "node_modules", "bower_components", "test", "tests" ], "main": [ "app/index.js" ], "resolutions": { "angular": "^1.3.15" } }

How to support RTL

To support RTL (right-to-left) languages, i.e., Hebrew and Arabic, specify those languages as rtl in the configuration.

From :launchpad/launchpad-app/conf/rtl.json

{ "he": "rtl", "ar": "rtl" }

AngularJS Translate filter and how that integrates with the localization files

After adding the angular jumpstart i18n dependency in , use the translate filter wherever some text needs to be displayed on the view.bower.json

For an example, to display a text from , it is accessed on the HTML as shown below:locale-en.json

From portal-ui/shop-ui/templates/shop-ui/configure/configure-form.html:


45

<a ng-click="configure.tryUpdatePriceAgain()"> {{'shopui.order.tryAgain' | translate}}</a>

The corresponding file:locale-en.json

From :portal-ui/shop-ui/locales/locale-en.json

"shopui":{ "order": { "tryAgain": "Try Again" } }

Add Static Assets

Static Assets

Use the following Jumpstart Yeoman generator to create a module:


It will ask you to select types your module would like to implement.

Select (e.g., images files).UI Assets

This allows your module to provide static assets such as images and fonts.

In the module folder, a file is created with the keyword .bower.json jumpstart-asset

{ "name": "helloworld-ui", "version": "0.1.0", "keywords": [ ..., "jumpstart-asset", ... ], ... }

In addition to this keyword, an folder is created. This is where images or any other static files kept within assets are served by theassetsJumpstart application.

From these assets, the image is accessed to display on the Jumpstart application as shown below:

An HTML Example:

A static asset is a file that is served without any interpretation. Common examples of static assets are icons that areDefinition:displayed.


46

<img src="assets/yourmodule/images/app-diagnostics.png" alt="app icon">

A CSS Example:

@font-face { font-family: "MyFont"; src: url(assets/yourmodule/fonts/MyFont.ttf) format("truetype"); } h1 { font-family: "MyFont", sans-serif }

Usage

When you run from your application server directory, the gulp tasks defined in the modulegulp jumpstart-engine-angular-express-sassbuild a directory in your application server folder. These generated files map to a route on your server..tmp /assets/yourmodule/

Access the Organization Object

Organization Object

Organizations are subsets of a single HPE Propel installation's users. Users are entitled to different catalogs and functions that are confined withinan organization. Here you'll learn to use the power of the HPE Propel organizational model to control the users' experience within a customJumpstart application.

The following example retrieves the organization (aka "tenant") model for the organization that the user is logged into.

How to Use

The Organization object is resolved within the module's propel state and assigned to variable 'tenant'.propel-layout

In order to the use organization object within a module, the resolved tenant object needs to be passed to the controller.

Sample Code:

angular.module('helloworld-ui') .controller('HelloWorldCtrl', ['$scope', 'tenant', function ($scope, tenant) { var org = tenant.name; }]);

Information available on the organization object

The Organization object has properties including name, displayName and other metadata information.

Sample Data:


47

{ "name": "CONSUMER", "displayName": "Consumer", "description": "Propel Consumer Organization", "metadata": [{ "key": "portalTitle", "value": "Propel", "public": true, "id": "ff808081481edd9f01481ee41fcf0001" }, { "key": "themeName", "public": true, "id": "ff808081481edd9f01481ee41fcf0008" }, ... ] }

Dependencies

The dependency is required to access the resolved organization object. The file includes this dependencypropel-layout bower.jsondeclaration:

"propel-layout": "~0.5.3",


48

Jumpstart Hands-On - Module DocumentationLoad Propel BLOB ObjectControl Propel FormsConvert Propel MarkdownConfigure Propel WidgetLocalize Propel MessagesConfigure Propel Search

Load Propel BLOB Object

Propel-blob

This module provides the ability to load and display a BLOB (Binary Large OBject) object into a web-browser.

This module includes a filter named to process the image, and a directive to drop the file into a field.BlobImageFilter nvFileDrop

BlobImage Filter

If an image has been stored in the HPE Propel database, you can get a URL for that image with the filter. This Angular.js filter requiresblobImagean image guid and returns a URL that gets the image from the Propel database.

The filter returns the HPE Propel system default image.defaultImage

Example:

<img ng-src="vm.item.summary.icon.guid | blobImage" alt="summary image">

nvFileDrop Directive

This directive is used for image upload. It allows drag and drop, or file selection.

Example:

 <div nv-file-drop uploader="checkout.uploader"> <input type="button" id="uploadBtn" class="button small radius" onclick="document.getElementById('fileUpload').click();" value="upload"/> </div>

Blob API

The propel-blob api provides the Angular.js $resource endpoint to get an image from the Propel database. It only defines a call for the HTTP GETverb.

function catalogItemService(catalogItemApi, catalogApi, categoryApi, blobApi, globalError, $q) { blobApi.get({endity='abc', eid='12343', collection='coll', cid='123454'}) }

Note: The following is simply an example. Your implementation may be different.


49

1. 2. 3.

Control Propel Forms

Propel-Forms

This module provides predefined controls which can be used in forms. and are two directives that should be used inParent-form Child-formconjunction with each other (if a child form is used). The main objective of these two directives is to open/clear the forms to a pristine state.

The method can be called to set/reset the form to its pristine state. (See $setPristine()

for more information.) Setting a form back to a pristine state is often useful whenhttps://docs.angularjs.org/api/ng/type/form.FormControlleryou want to 'reuse' a form after saving or resetting it.

Overview

The major components of are:propel-form

ParentFormChildFormConfirm-Unsaved-Changes

ParentForm

Usage:

<form parent-form> ...</form>

This module also watches for events from the all elements. If the elements are not dirty (i.e., the user hasn't interacted with theChild-Formform), then it sets the nested form to the pristine state. (See for more information.)https://docs.angularjs.org/api/ng/type/form.FormController

ChildForm

This directive is responsible for adding all its elements to the parent form. propagates down the html tree, and it also notifies$setPristine()the parent form if its elements are dirty. (See for more information.)https://docs.angularjs.org/api/ng/type/form.FormController

Usage:

<form child-form> <input> <input> </form> <button> Submit Button </button>

Nesting

The and directives can be used to nest forms. Below is a skeleton for a nested form.parent-form child-form

The Angular.js ng-form does not propagate events such as setPristine back up to the parent form. Therefore, it needs to be doneNote:explicitly when the form is instantiated.


https://docs.angularjs.org/api/ng/type/form.FormController



50

<form parent-form> <input> <input> <form child-form> <input> <input> </form> <button> Submit Button </button> </form>

Confirm Unsaved Changes

This directive's main function is to open a modal to confirm unsaved changes when the state is about to be changed or before the page isrefreshed if the form is dirty (i.e., the user has interacted with the form). This directive responds to both browser navigation events and browserclosing events. Navigation events open an HTML based modal window. Browser/Tab closing events issue a web-browser based modal window.

Usage:

<form confirm-unsaved-changes> </form>

Dependencies

angular - https://code.angularjs.org/1.3.4/docs/api

This package also depends on the following HPE Propel/IDM-based bower package:

jumpstart-angular-i18n

This package is automatically installed with the . You can also install it manually by running the following command:Hello World Example

bower install jumpstart-angular-i18n

Convert Propel Markdown

Propel Markdown

This module converts Markdown string text to HTML format and provides a WYSIWYG (What You See Is What You Get) editor.

Markdown-WYSIWYG editor (directive)

This directive provides a WYSIWYG editor which saves the data in markdown format and can be used in applications. This editor is based onProseMirror but is modified for HPE Propel's specification. This editor is intended for non-developer users. (See for morehttp://prosemirror.net/information.)

How to use

Use the directive. It is so most functionality works out of the box.<markdown-wysiwyg> ng-model-enabled



http://prosemirror.net/

51

<markdown-wysiwyg ng-model="wysiwyg" ng-change="wysiwygChanged()" ng-disabled="wysiwygDisabled"> </markdown-wysiwyg>

View

The following image is an example of the WYSIWYG editor.

Markdown Filter

This Angular.js filter parses the markdown syntax string and converts it into HTML content.

Usage:

<div ng-bind-html="vm.description | markdown"></div>

Code:

.filter('markdown', function() { return function(input) { input = input || ''; /*global markdownit */ var md = markdownit({ html: false, breaks: true, inkify: true }); return md.render(input); };

markdown (directive)


52

The directive example takes in a markdown syntax string and generates the HTML content onto a template named "text | markdown".markdown

Example

This example shows creating a markdown editor that binds to a summary description field in your angular controller:

<span markdown="{{vm.item.summary.description}}"></span>

Dependencies

angular - https://code.angularjs.org/1.3.4/docs/apifont-awesome - https://github.com/FortAwesome/Font-Awesomesugar - http://sugarjs.com/apimarkdown-it - https://markdown-it.github.io/markdown-it/





Configure Propel Widget

Propel-Widget

Widgets

There are two types of widgets:

Mashup Widget - A tile that appears on the launchpad that contains user-defined HTML that fits in the bounds of the tile.Link Widget - A tile that appears on the launchpad that links to an external site.

A third type of error widget exists, the Unknown Widget, that is displayed when a widget is present but not configured correctly.

Configuration

This module also contains a factory which parses the JSON object for the value of , whose value is used towidgetConverter widget.typeconvert the widget, using an in the template.ng-switch

When you create a directive, it is by default restricted to the attribute and elements only. In order to create directives that areNote:triggered by class name, you need to use the restrict option. In this example, is an option to only match attributerestrict: 'A'name.

Widgets are tiles that appear on the Lauchpad that allow a customer to inject arbitray content, another application, orDefinition:provide a link to a site which makes business sense to navigate to starting from HPE Propel.



https://github.com/FortAwesome/Font-Awesome

http://sugarjs.com/api

https://markdown-it.github.io/markdown-it/

53

var parsed = items.each(function convert(item) { if (item.name && item.name.startsWith('widget:', 0, false)) { try { item.value = JSON.parse(item.value); } catch (e) { $log.warn('Unable to parse widget as JSON: ' + item.name); $log.debug(e); item.value = { content: item.value, type: 'UNKNOWN' }; } } });

Usage

Widgets are converted based on the value of the object.widget.type

<div ng-switch="widget.type"> <div link-widget ng-switch-when="LINK" widget="widget"></div> <mashup-widget ng-switch-when="MASHUP" widget="widget"></mashup-widget> <unknown-widget ng-switch-default widget="widget"></unknown-widget> </div>

Widget Directives

There are four main widget directives.

Directive (* = primary widget) Description

mashup-widget * Arbitrary content as determined by the developer.

link-widget * A widget that links to an external source.

propel-widget Determines if you have a mashup widget, a link widget, or an unknown widget and then renders it.

unknown-widget When using the widgetConverter, the widget type cannot be determined from the configuration.

Mashup-widget

The is used to display html using in its full width and height. (See mashup-widget ng-bind-html for more information.)https://docs.angularjs.org/api/ng/directive/ngBindHtml

Example:

<mashup-widget widget="widget"></mashup-widget>


https://docs.angularjs.org/api/ng/directive/ngBindHtml

54

Link Widget

This widget is used to create a Link widget with an image.

Example:

<div link-widget widget="widget"></div>

Localize Propel Messages

Propel-Messages

This module provides localization of commonly used text within HPE Propel. (See for more information.) Common HPE Propel texthttps://www.gala-global.org/language-industry/intro-language-industry/what-localization

includes Okay, Cancel, Link, Undo, Redo, etc. This module also contains the text of commonly used error messages. It does this with a collectionof localization files that are in a hierarchal key-value-pair format.

The Angular filter is used to provide mappings from the key to the translation value. (See translate for more information.) Propel provideshttps://github.com/angular-translate/angular-translate/wiki/Getting-Started#using-translate-filter

localization in several languages including:

EnglishCzechDanishGermanArabicSpanishFrenchHebrew


https://www.gala-global.org/language-industry/intro-language-industry/what-localization

https://github.com/angular-translate/angular-translate/wiki/Getting-Started#using-translate-filter

55

HungarianItalianJapaneseKoreanDutchPolishBrazilian-PortugueseRussianTurkishChinese

Usage

Template:

<button class="button" id="confirm-leave-no">'common.cancel' | translate</button>

locale.en.json:

"common": { "yes": "Yes", "no": "No", "continue": "Continue", "cancel": "Cancel" }

The filter is responsible to translate the text based on language.translate

Dependencies

angular - https://code.angularjs.org/1.3.4/docs/apiangular-translate - https://github.com/angular-translate/angular-translate





Configure Propel Search

Propel Search

The module provides directives that are used to render role-based input with a typeahead feature.propel-search

Dependencies

Propel-search is a required dependency to access resolved objects and should be included in your app using the file.bower.json

"propel-search": "^0.3.0",

Search-bar directive



https://github.com/angular-translate/angular-translate

56

Below are available options for the search-bar directive:

Option Data Type Description

Typeahead-enabled boolean Determines whether typeahead is enabled or disabled.

search-text string Bind to parent scope.

on-search function Function to be triggered when clicked on with search text.

placeholder string Placeholder text.

max-length number Maximum length, defaults to 255 characters if not provided.

tab-index number Element's tab-index.

<search-bar idm-if-role="'CONSUMER'" typeahead-enabled="true" search-text="vm.query" on-search="vm.search(vm.query)" placeholder="{{'lpd.search' | translate}}"> </search-bar>

Here is an example resolver for an angular state that intiatializes the search service.

Define a sorting service:

'use strict'; function SortingService(SortModel) { var sortOptions = [{ name: 'relevancy', value: 'relevancy:desc' }, { name: 'newest', value: 'modified:desc' }, { name: 'oldest', value: 'modified:asc' }, { name: 'expensive', value: 'price:desc' }, { name: 'cheap', value: 'price:asc' }, { name: 'alphabetical', value: 'title:asc' }, { name: 'reverseAlphabetical', value: 'title:desc' }];


57

function SortModel() { SortModel.call(this, sortOptions); } SortModel.prototype = Object.create(SortModel.prototype); SortModel.prototype.constructor = SortModel; return new SortModel(); } angular.module('helloworld') .factory('sortService', SortingService);

Use a state resolver to set up the search service.

// construct query for API callmyController.constructQuery = function(params, sortService, filters) { var query = Object.extended({ searchText: params.search || '*', startIndex: params.startIndex || 0, pageSize: params.pageSize || 20, sort: sortService.getValue(params.sort || 'newest') }) // merge items not explicitly mapped .merge(filters) .reject('search') .findAll(/^(?!undefined)/);

return query;};


58

myController.resolve = /*@ngInject*/ { /** * First, resolve the search service API * (using abstract search api factory) */ serviceSearchApi: function(abstractSearchApiFactory) { return abstractSearchApiFactory.create('service') }, /** * Second, create a SearchQueryModel and provide the * serviceSearchAPI for the facets */ searchModel: function ($location, $stateParams, SearchQueryModelFactory, serviceSearchApi) { return SearchQueryModelFactory( { search: "searchText", category: "search category", sort: "asc" }, serviceSearchApi.facets ); }, /** * Finally, fetch the initial service items with * the serviceSearchApi */ initialItems: function(serviceSearchApi, sortService, searchModel, $stateParams) { var searchQuery = searchModel.getQuery(); searchQuery.sort = $stateParams.sort

var query = myController.constructQuery( myController.initializeParams(searchQuery), sortService, // merges extra items not normalized by construct // (custom filters, etc.) searchModel.getQuery() );

return serviceSearchApi.search(query) .$promise .then(function (data) { return data; }) .catch(function (err) { $log.error('Search Error', err); return {}; }); }}

Finally, here is the call to the controller to do the search. It is used in the html as .search-bar vm.search(vm.query)


59

function myController(serviceSearchApi) { var vm = this;

function search(query) {

return serviceSearchApi.search(query) .$promise .then(function (data) { return data; }) .catch(function (err) { $log.error('Search Error', err); return {}; }); }}

Universal Search

Universal Search is used to search all of HPE Propel. You typically create a that takes the user's input. Then add the following codesearch-barwithin a parent controller to change the state to . This opens a new page with a search dialog providing all results from the universal-search

input as shown in the example below.searchText

vm.search = function(searchText) { $state.go('universal-search', { search: searchText }, { notify: true }); }


60

Hello World Example

Hello World"Hello World" is a common training example used throughout computing. This section shows you how to set up "Hello World" as an exampleJumpstart project for use with HPE Propel.

Requirements

Follow the instructions for installing bower and npm:

Install bowerInstall npm

Bower Setup

Create a file in your home directory with a text editor:.bowerrc

Linux/Mac OS: $HOME/.bowerrc Windows: %HOMEPATH%\.bowerrc

Add the following content:

{ "proxy" : "<OPTIONAL: your proxy here>", "https-proxy": "<OPTIONAL: your proxy here>", "resolvers": [ "bower-art-resolver" ], "registry":"https://propelrepo.com:443/artifactory/api/bower/jumpstart-bower-virt", "strict-ssl": false}

Node Package Manager (npm) Setup

Create a file in your home directory with a text editor:.npmrc

Linux/Mac OS: $HOME/.npmrcWindows: %HOMEPATH%\.npmrc

Add the following content:

@propel:registry=https://propelrepo.com:443/artifactory/api/npm/jumpstart/strict-ssl=false

Helloworld Installation

From a command prompt type the following:

.bowerrc

.npmrc


61

bower install helloworld-uinpm install @propel/helloworld-api

This will create two directories:

bower_components - Contains all of the source code for the bower module. Components that start with idm or propel are specific toHPE Propel Jumpstart, for example: idm-angular-core, idm-angular-ui-router, propel-foundation-theme, propel-extensions, and so on. Bower components can be manually installed with the command:bower install <component>npm_modules - Contains all of the source code for the npm module. Forexample, @propel/idm-express, @propel/propel-dashboard, @propel/generator-jumpstart, @propel/helloworld-api, and so on. npm modules can be manually installed with the command: npm install <module>

Your "Hello World" project is ready to be used with HPE Propel.

Documents

Jumpstart Hands-On Guide… · Jumpstart Hands-On Guide . ... As a valued support customer, you can benefit by using the support web site to: Jumpstart Hands-On Guide. 4 Search for