Giter VIP home page Giter VIP logo

veeva's Introduction

Veeva

NPM version Build Status npm

This npm package was developed to centralize core functionality and worklfow processes for building Veeva iRep CLM Presentations.

If you're developing and managing several client Veeva CLM projects, then you know it's cumbersome to introduce new functionality (outside of content) when your code-base is inconsistent across multiple repositories.

๐Ÿ”— Veeva CLM Example

Features

  • Define Veeva CLM presentations in one central configuration.yml file
  • Template and partial system using Assemble.io
  • SASS compilation
  • Relative link conversion to veeva: protocol links
  • Automatic screen shot, thumbnail, and zip file generation
  • iRep control file generator based on configuration.yml file
  • Vault Multichannel .CSV generator based on configuration.yml file
  • Development Mode: - Watch, rebuild, and reload Key Messages locally in your web browser

In This Documentation

  1. Getting Started
  2. File Structure
  3. Working with the Source Files
  4. Options & Settings
  5. Gulp Tasks & Workflow
  6. Troubleshooting & FAQ

Getting Started

Dependencies

Install the following prerequisites on your development machine.

Quick Start

$ npm install veeva --save

Setup

Once the npm install has completed, the following file structure below will need to be placed into your project root directory. For a complete working example, please reference Veeva CLM Example

File Structure

Add your files to the appropriate app sub directories. Gulp will process and compile them into build.

Notes:

  • Key Message naming convention is set as the following: product name-Key Message Name
root/
|โ€”โ€” app/
|   |โ€”โ€” assets/
|   |   |โ€”โ€” scss/
|   |   |โ€”โ€” js/
|   |โ€”โ€” templates/
|   |   |โ€”โ€” includes
|   |   |โ€”โ€” layouts
|   |   |โ€”โ€” pages
|   |   |   |โ€”โ€” globals
|   |   |   |   |โ€”โ€” fonts
|   |   |   |   |โ€”โ€” images
|   |   |   |   |โ€”โ€” isi.hbs
|   |   |   |   |โ€”โ€” terms.hbs
|   |   |   |โ€”โ€” veeva-home
|   |   |   |   |โ€”โ€” images
|   |   |   |   |โ€”โ€” veeva-home.hbs
|   |   |   |โ€”โ€” veeva-overview
|   |   |   |   |โ€”โ€” images
|   |   |   |   |โ€”โ€” veeva-overview.hbs
|   |   |   |โ€”โ€” veeva-resources
|   |   |   |   |โ€”โ€” images
|   |   |   |   |โ€”โ€” veeva-resources.hbs
|   |   |   |โ€”โ€” veeva-sitemap
|   |   |   |   |โ€”โ€” images
|   |   |   |   |โ€”โ€” js
|   |   |   |   |โ€”โ€” veeva-sitemap.hbs
|
|
|โ€”โ€” configuration.yml
|โ€”โ€” gulfile.js
|โ€”โ€” package.json

Working with the Source Files

Sass

Sass files are located in app > assets > scss. Gulp watches and generates minified and unminified CSS files.

JavaScript

JavaScript files are located in the app > assets > js directory.

Assemble.io Templates

Template files are located in the app > templates.

Options and Settings

Configuration File

View full configuration.yml example

Inside configuration.yml, add Key Messages under the clm node.

clm:
  product:
  name: 'Product-Name'
  suffix: '-'
 primary:
  name: 'CLM-Presentation-ID'
  key_messages:
  - key_message: 'home'
    description: 'Home'
    display_order: '0'
    slides:
    - slide: 'home'
      id: '0'
  - key_message: 'overview'
    description: 'Veeva Test Overview'
    display_order: '1'
    slides:
    - slide: 'Veeva Test Overview'
      id: '2-0'
  - key_message: 'sitemap'
    description: 'Sitemap'
    display_order: '2'
    slides:
    - slide: 'Sitemap'
      id: '0-1'

Changing the Directory Structure

Inside configuration.yml you'll see a variable named paths. Adjust the paths to suit your workflow.

"paths": {
    "src": "app",
    "dist": "build",
    "deploy": "deploy",
    "tmp": "build/.tmp",
    "pages": "app/templates/pages",
    "layouts": "app/templates/layouts"
}

Gulp Tasks and Workflow

For a quick reference in your terminal:

$ gulp --help

Usage: gulp <task> [options]

TASKS
_________________________________________________________________________
$ gulp                      Default task that kicks off development mode
$ gulp build                Build task
$ gulp stage                Stage task
$ gulp veeva-deploy         Deploy task
$ gulp veeva-vault-stage    Generates a Veeva Vault Multichannel Loader .CSV file

OPTIONS
_________________________________________________________________________
    -a --all-key-messages  Include hidden Key Messages when staging and deploying
    -c --config            Show merged configuration
    -d --dry-run           Do not touch or write anything, but show the commands and interactivity
    -e --debug             Output exceptions
    -h --help              Print this help
    -k --key-message       Build, Stage, and Deploy single Key Message
    -v --version           Print version number
    -V --verbose           Verbose output
$ gulp

Runs the following workflow:

  • Assembles template files
  • Compiles Sass files
  • Copies project JS files
  • Copies the Veeva module JS dependencies
  • Copies images
  • Starts browserSync, watches for changes, and reloads browser when file changes are triggered
$ gulp build

Runs the following workflow:

  • Assembles template files
  • Compiles Sass files and minifies CSS
  • Uglfies project JS files
  • Copies the Veeva module JS dependencies
  • Copies images
  • Generates Veeva required thumbnails per Key Message
  • Enables deploy mode
    • Converts relative links to Veeva protocol links (Navigation, Click Stream events, etc.)
$ gulp stage

Runs the following workflow:

  • Runs the gulp build process
  • Generates individual Key Message zip files and places them into the deploy directory
  • Creates individual Key Message ctl files based on configuration.yml file details and places them into the deploy directory
$ gulp veeva-deploy

Note: this process uses FTP information stored in the configuration.yml file Runs the following workflow:

  • Uploads all .zip files sitting in the deploy directory
  • Once all of the .zip files have been uploaded, all .ctl files sitting in the deploy directory are then uploaded
$ gulp veeva-vault-stage

Runs the following workflow:

  • Generates a Veeva Vault Multichannel Loader .csv file based on configuration.yml details

Notes

  • Generated thumbnails (screen shots) only process .html files, so static Key Messages (i.e., pdf) will still need to have Veeva required thumbnails generated

Troubleshooting

If you're having issues with the Veeva Node Package, submit a submit a GitHub Issue.

  • Ensure you're running the correct node and npm versions specified in the package.json file
  • Make sure your configuration.yml file exists and is well formatted

veeva's People

Contributors

guumo avatar seth-reeser avatar stevebritton avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

veeva's Issues

Task 'veeva-module:js-build' is not in your gulpfile

After installing and going to examples/clm directory, I'm entering "gulp", which produces this error:

Task 'veeva-module:js-build' is not in your gulpfile

You can avoid the error by running "gulp build", but the behavior of the tool has changed from version 0.27.0 and it's no longer firing the http://localhost:3000/ page either.

And even in that case, it appears that the build directory only contains the global directory and not the built out HTML files.

Global popup not working

I see the page-level popups functioning from the first overview page of the clm example, but I am unable to add a global popup to the footer. It looks like the "terms" content was supposed to function as a global popup, but I don't see this functioning in the example clm project.

When I try to add this myself, the trigger button adds a new .content div around the slide's .content div rather than adding a #popup-wrapper component.

Is there a way to add a global popup?

Include iRep native icons

While in dev mode, include iRep's native icons so it's clear where they'll be represented in the presentation.

veeva-deploy not doing anything

Hi,

I just installed veeva and tried it with provided example project. Even though the script reports:

[13:40:53] Starting 'veeva-deploy'...
NOTE โคท Deploying zipped files
NOTE โคท Deploying control files
โœ”๏ธŽ Done Deploying Key Messages
[13:40:53] Finished 'veeva-deploy' after 22 ms

Nothing get sent to my account, I validated using FTP. I tried adding command line option -V for verbosity, didn't change.

Thanks,

Move all CLI commands

Move all CLI commands from gulp over to veeva

  • removes the gulp dependency from individual projects using the veeva module
  • provides more control over terminal output
  • allows end-user to incorporate gulp as needed without potential conflicts

Gulp task stops without throwing an error

After cloning repo and running npm installation both in root and "veeva/examples/clm/" I was trying to run default gulp task. For some reason gulp quits without throwing any error to console. Imagemagick installed. No errors thrown during npm install process. The only file i modified is veeva/package.json - changed "name" (otherwise it was throwing an error "Can't install veeva as dependency of veeva").

Below is my output:

$ gulp

   โœ”๏ธŽ configuration.yml file exists
   โœ”๏ธŽ Product name
   โœ”๏ธŽ Primary CLM presentation name
   โœ”๏ธŽ Assets CLM presentation name 

[15:18:55] Using gulpfile ~/aside/custom_veeva/gulpfile.js
[15:18:56] Starting 'assemble'...
 NOTE โคท Assembling Key Messages
[15:18:56] Starting 'sass:dev'...
[15:18:56] Starting 'scripts:dev'...
[15:18:56] Starting 'veeva-module:js-build'...
 NOTE โคท Processing Veeva JS dependencies.
[15:18:56] Starting 'images:dev'...

$

$ veeva -v
v0.27.0

$ gulp -v
[15:19:44] CLI version 3.9.1
[15:19:44] Local version 3.9.1

$ node -v
v6.10.0

$ npm -v
3.10.10

I would appreciate any advice.

-

After a clean install of the CLM example, I tried to run gulp default task and the task exit without an error.

I tracked the issue to the assemble task, in the dev.js file.
If I remove it from the gulp default task, all the subtask get executed without error and the browsersync server get started.

Here is the output I get:

 โคท Validating configuration.yml

   โœ”๏ธŽ configuration.yml file exists
   โœ”๏ธŽ Product name
   โœ”๏ธŽ Primary CLM presentation name
   โœ”๏ธŽ Assets CLM presentation name

[14:31:11] Using gulpfile C:\clm\gulpfile.js
[14:31:12] Starting 'assemble'...
NOTE โคท Assembling Key Messages
[14:31:12] Starting 'sass:dev'...
[14:31:12] Starting 'scripts:dev'...
[14:31:12] Starting 'veeva-module:js-build'...
NOTE โคท Processing Veeva JS dependencies.
[14:31:12] Starting 'images:dev'...
C:\clm> 

Also, if I run just asemble task with gulp assemble I get this output:

 โคท Validating configuration.yml

   โœ”๏ธŽ configuration.yml file exists
   โœ”๏ธŽ Product name
   โœ”๏ธŽ Primary CLM presentation name
   โœ”๏ธŽ Assets CLM presentation name

[15:26:18] Using gulpfile C:\clm\gulpfile.js
[15:26:19] Starting 'assemble'...
NOTE โคท Assembling Key Messages

C:\clm> 

Running gulp assemble:test task give me this output:

   โœ”๏ธŽ configuration.yml file exists
   โœ”๏ธŽ Product name
   โœ”๏ธŽ Primary CLM presentation name
   โœ”๏ธŽ Assets CLM presentation name

[15:27:16] Using gulpfile C:\clm\gulpfile.js
[15:27:18] Starting 'assemble:test'...
NOTE โคท Assembling Single Key Message: undefined
โœ— ERROR: Path must be a string. Received undefined
[15:27:18] 'assemble:test' errored after 448 ms
[15:27:18] TypeError: Path must be a string. Received undefined
    at assertPath (path.js:28:11)
    at Object.join (path.js:503:7)
    at assembleSingleTemplate (C:\clm\node_modules\veeva\gulp\assemble.js:26:24)
    at C:\clm\node_modules\veeva\gulp\assemble.js:326:28
    at Object.executeWhen (C:\clm\node_modules\veeva\lib\utils.js:17:20)
    at C:\clm\node_modules\veeva\gulp\assemble.js:325:30
    at _fulfilled (C:\clm\node_modules\q\q.js:854:54)
    at self.promiseDispatch.done (C:\clm\node_modules\q\q.js:883:30)
    at Promise.promise.promiseDispatch (C:\clm\node_modules\q\q.js:816:13)
    at C:\clm\node_modules\q\q.js:570:49

C:\clm>

Finaly, this is my config file, untouch except for the path.pages and pages.layouts:

---
software:
  name: Veeva CLM Builder

clm:
 customFields:
  veevaTrackSubsceneField:
 ftp:
  email:
  host:
  user:
  pass:
  remotePath: '/ctlfile'
 product:
  name: 'veeva'
  suffix: '-'
 primary:
  name: 'veeva-v1'
  key_messages:
  - key_message: 'home'
    description: 'Home'
    display_order: '0'
    slides:
    - slide: 'Home Veeva CLM Example'
      id: '0'
  - key_message: 'overview'
    description: 'Veeva Test Overview'
    display_order: '1'
    slides:
    - slide: 'Veeva Test Overview'
      id: '2-0'
    - slide: 'Sub Slide 1'
      id: '2-1'
    - slide: 'Sub Slide 2'
      id: '2-2'
  - key_message: 'sitemap'
    description: 'Sitemap'
    display_order: '2'
    slides:
    - slide: 'Sitemap'
      id: '0-1'
  - key_message: 'resources'
    description: 'Resources'
    display_order: '3'
    slides:
    - slide: 'Resources'
      id: '0-2'
 assets:
  name: 'veeva-assets-v1'
  key_messages:
  - key_message: 'prescribing-information'
    description: 'Prescribing Information'
    display_order: 0
  - key_message: 'patient-brochure'
    description: 'Patient Brochure'
    display_order: 2

paths:
    src: 'app'
    dist: 'build'
    deploy: 'deploy'
    tmp: 'build/.tmp'
    pages: 'app/templates/pages'
    layouts: 'app/templates/layouts'

I'm running Windows 10, with node v8.6.0.

Any help?

Thanks!!!!

Does Assemble Collections work?

I've been trying to use some of the assemble collections to generate links to pages. Do collections work for this project?

veeva help

Hello, When i tried to run command veeva its give me following error:

veeva : The term 'veeva' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name,
or if a path was included, verify that the path is correct and try again.
At line:1 char:1

  • veeva
  •   + CategoryInfo          : ObjectNotFound: (veeva:String) [], CommandNotFoundException
      + FullyQualifiedErrorId : CommandNotFoundException
    
    

can you please help me

Global folder in each slide folder

Hi,

I noticed that using the gulp build command, the slide folders contain a (as it seems) redundant global folder (with all css/js). Is this expected behavior, or should I update the build definition of Gulp?

Great tool by the way, thanks for that!

gulp build issue

Hi devops.

Thank you for creating a package. while running gulp build command, it got failed. show error sass is recognized as an internal or external command.
Thanks

Generating Veeva Thumbnails issue

Running "gulp build" returns the following error:

Generating Veeva Thumbnails
events.js:154
throw er; // Unhandled 'error' event
^

Error: spawn convert ENOENT
at exports._errnoException (util.js:890:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:182:32)
at onErrorNT (internal/child_process.js:348:16)
at _combinedTickCallback (node.js:377:13)
at process._tickCallback (node.js:401:11)

CSV generation

hi,

I am new to Veeva but what you have made looks amazing. Apologies if this is a stupid question but I was just wondering if the CSV generation is compliant with the latest version of Veeva. I generated the files based on the example and tried uploading the CSV onto the multichannel loader. When I upload the CSV I get a few errors e.g. (Error 219) no presentation exists which matches veeva-v1.

Any help would be much appreciated.

Assets vs primary configuration.yml

Considering configuration.yml file, I understand that primary is the pages directory in which you create each slide, but what about the assets, where do we create those PI and patient brochure?

Thanks

configuration.yml Exception Handling

Currently, there is no exception handling around loading the configuration.yml file, the gulp command stops processing and doesn't report anything back to the end-user.

GULP-RUBY-SASS

Hi, when i run Gulp Build v 1.1 I get this:

[11:08:20] Could not find an option named "sourcemap".
[11:08:20] Usage: sass <input.scss> [output.css]
sass <input.scss>:<output.css> :

My config is default apart from this:

paths:
src: 'app'
dist: 'build'
deploy: 'deploy'
tmp: 'build/.tmp'
pages: 'app/templates/pages'
layouts: 'app/templates/layouts'

Looks like you have moved to Gulp-Sass in version 2 but I cannot get that to run either. Any ideas?

Layout default cannot be found

Most of the pages in the example are having an error:
layout "default" was defined on view "veeva-resources\veeva-resources.hbs" but cannot be not found (common causes are incorrect glob patterns, renameKey function modifying the key, and typos in search pattern)

Thumbnail generation seems to break when using display: flex;

Most elements render correctly during thumbnail generation, but I've noticed elements that get displayed using flex tend to break. Is this plausible or is the generation glitch due to something else?

HTML and dev tools:
image

Thumbnail generation:
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.