Howto add ESRI component in a custom panel.

A custom panel with only one map loaded and the GPS coordinates of the device loaded when you choose a device in a ruban dashboard :

Some CSS and Javascript files are already loaded with ruban then you don't have to load again this files in the view.html :

<link rel="stylesheet" type="text/css" href="resources/font-awesome-4.3.0/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.13/esri/css/esri.css">

<style>@import "http://js.arcgis.com/3.14/dijit/themes/claro/claro.css";</style>

<script type="text/javascript" charset="utf-8" src="http://js.arcgis.com/3.14/dojox/gfx/svg.js"></script>

<script type="text/javascript" charset="utf-8" src="http://js.arcgis.com/3.14/esri/nls/jsapi_en-us.js"></script>

<script type="text/javascript" charset="utf-8" src="/eem/js/lib/jquery/jquery-1.10.2.min.js"></script>

<script type="text/javascript" charset="utf-8" src="/eem/js/lib/underscore/underscore-min.js"></script>

<script type="text/javascript" src="js/lib/d3/d3.min.js"></script>

<script src="http://js.arcgis.com/3.14/"></script>

1. Load your personal view.js file.
   
   

In the panel.js file you need to define your personal view.js file and the other library you want .

The order to define and to declare is really important, it have to be the same order in the define part and in the function part ! 

In this example I load my personal view.js file and I initialize it as a View object.

define([
"dojo/_base/declare",
"ruban/panel",
"jquery",
"d3",
"./view" //HERE I define my view.js file at the root of my custom panel directory
],
function(
declare,
Panel,
$,
d3,
View // HERE my View Object.
){

1.1. Initialize your View.

initView: function(context) {
this.view = new View();
this.view.init(context);
}

2. Load The ESRI component in your View.

In your view.js file you have to define the components of ESRI you want to load :

The order to define and to declare is really important, it have to be the same order in the define part and in the function part !

define([
"dojo/_base/declare",
"jquery",
"underscore",
"esri/map",
"esri/toolbars/draw",
"esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/PictureMarkerSymbol",
"esri/InfoTemplate",
"esri/graphic",
"esri/layers/GraphicsLayer",
"dojo/domReady!"
],

function(
declare,
$,
_,
Map,
Draw,
Point,
SimpleMarkerSymbol,
PictureMarkerSymbol,
InfoTemplate,
Graphic,
GraphicsLayer
) {

3. Initialize the map.

To initialize the ESRI map, you have to write in your init function of your view.js file.

map = new Map("map", {

basemap: "streets",
center: [ 0, 0 ],
zoom: 4,
slider: true,
showInfoWindowOnClick: true

});