Skip to content

Latest commit

 

History

History
180 lines (124 loc) · 7.09 KB

DEVELOPER.md

File metadata and controls

180 lines (124 loc) · 7.09 KB
Raw

Developer Guide

Installing IDS into your project

Before installing IDS for usage in your project, make sure to install its dependencies:

Download IDS

NPM

You can use NPM (or Yarn) to install from the global NPM registry:

npm install --save ids-enterprise@latest

You can also use ids-enterprise@dev for a nightly (and potentially unstable) development build.

After installation, the pre-built files are accessible in ./node_modules/ids-enterprise/dist

CDN

We now offer the IDS library via CDN. For example, the paths for the 4.10.0 releases would be:

https://cdn.hookandloop.infor.com/sohoxi/4.10.0/js/sohoxi.js
https://cdn.hookandloop.infor.com/sohoxi/4.10.0/js/sohoxi.min.js
https://cdn.hookandloop.infor.com/sohoxi/4.10.0/css/dark-theme.css
https://cdn.hookandloop.infor.com/sohoxi/4.10.0/css/dark-theme.min.css
https://cdn.hookandloop.infor.com/sohoxi/4.10.0/css/dark-theme.css
https://cdn.hookandloop.infor.com/sohoxi/4.10.0/css/dark-theme.min.css
https://cdn.hookandloop.infor.com/sohoxi/4.10.0/css/light-theme.css
https://cdn.hookandloop.infor.com/sohoxi/4.10.0/css/light-theme.min.css
https://cdn.hookandloop.infor.com/sohoxi/4.10.0/svg/svg.html
https://cdn.hookandloop.infor.com/sohoxi/4.10.0/svg/svg-extended.html

Versions available on CDN are: 4.3.2, 4.3.3, 4.3.4, 4.3.5, 4.7.0, 4.8.0, 4.9.0, and 4.10.0.

Note: There may be a cost involved to using this with Infor's Amazon S3 account. Please keep this in mind when using the library this way.

Adding the library to a project

Include the IDS dependencies and the library itself in your page's <head> tag:

<head>
  <link rel="stylesheeet" href="css/light-theme.min.css" />
  <script src="js/jquery.min.js"></script>
  <script src="js/d3.min.js"></script>
  <script src="js/sohoxi.js"></script>
</head>

Next, establish some IDS components using the appropriate HTML markup and CSS styles. For a full list of available components, see our component documentation. Below is an example of what's necessary to create a simple IDS Button component inside of a twelve column layout:

<div class="row">
  <div class="twelve columns">

    <button id="my-button" class="btn-primary">
      <span>This is My Button</span>
    </button>

  </div>
</div>

Finally, in a footer section below the markup on your page, add a <script> tag with some Javascript code that will invoke the Javascript interactions available for each IDS component. One way to do this is to call the generic Initializer on the <body> tag (or whatever block element in which you want to scope IDS):

<script type="text/javascript">
  $('body').initialize();
</script>

It's also possible to manually initialize each individual component:

  $('#my-button').button();

If you've got some specific Javascript code you'd like to run after IDS completely initializes, simply add an event listener for IDS's generic initialized event on the <body> tag:

<script type="text/javascript">
  $('body').on('initialized', function () {
    // extra code runs here
  });
</script>

At this point, IDS should be completely setup in your project!

Running the development server

Install pre-requisites

Node.js

Node.js Version;

All of our build tools run in Node.JS. We are currently pinned to version 10 of node, so be sure to use that version. We have a script that tests for this during npm install. You'll also need all the requirements node-gyp suggests installing for your operating system.

Git

Our project uses Git for version control. Any pull requests made to IDS Enterprise will need to be done in a new branch cut from our latest master branch. See the Git Workflow documentation for more information.

Getting started

If using windows the default for linebreaks is CRLF. This project uses LF. In order to configure this for windows you can run the following command before cloning.

git config core.autocrlf false

Use the following to clone our repo and install dependencies:

git clone https://github.com/infor-design/enterprise.git
cd enterprise
npm i

Basic commands

See the scripts object in package.json for a full list of commands.

Editor Plugins

This project uses eslint and editorconfig. You may want to add linting plugins to your editor to help comply with our coding standards:

For Atom:

For VSCode:

Additionally, check out our Coding Standards documentation for the code standards that will be enforced by these plugins.

Guidelines for creating a new IDS Component

QA Documentation

See the QA Documentation Checklist.

Contributing

See our Contribution Guidelines.