Using Custom div Elements

If you are embedding DGLux5 files within your own already existing interface, you should follow these steps. These steps show you how to create your own custom <div> element that holds a .dg5 file and how to cause that <div> element to be loaded. This way you can quickly load multiple .dg5 files inside your existing HTML, even if those files are from different projects, and even if the projects have Project Dataflow.

There are five required steps:

1. Define a default project.
2. Remove the existing main <div>.
3. Define a custom <div>.
4. Add the onDgViewerLoaded function.
5. Cause the custom <div> elements to be loaded.

You can do all of this in viewer.html.

Custom <div> elements will not work at all if you do not manually define some default project. The default project is the project that loads in the Viewer when no project name is specified in the URL query string.

To define a default project:

1. Include this code in the body of viewer.html:

   <input id="defaultproj" value="projectName" type="hidden">

2. Replace projectName with the name of the project that you want to make default.

Your custom <div> will not replace the main one if you don’t delete the main <div>.

Delete this code in viewer.html:

<div id="rootDiv" class="absolute" style="width: 100%; height: 100%;">
</div>

Custom <div> elements must be defined, either in HTML or with script. To add a custom <div> in HTML:

1. Copy and paste this code in viewer.html:

   <div id="divName1">
   <div id="divName2">

2. Replace divName1 and divName2 with the names of your custom <div> elements. Add more <div> elements as appropriate. Delete the second <div> element in the example, if you don’t need it.

Finally, you must cause your custom <div> or <div>s to be loaded. One way to do this is by calling them in the onDgViewerLoaded function. You can also call them any time after onDgViewerLoaded.

To add onDgViewerLoaded:

1. Copy this function and paste it at the end of the script of viewer.html:

   function onDgViewerLoaded() {
    
   window.postMessage({"dgViewerDiv":"divName1","dgPagePath":"pageName1.dg5"},"*")
   window.postMessage({"dgViewerDiv":"divName2","dgPagePath":"lib/test/pageName2.dg5"},"*");
        }

2. Replace divName1 and divName2 with the names of the custom <div> elements that you defined. As appropriate, add more <div> elements, or delete one of the two existing <div> elements in the sample.
3. Replace pageName1.dg5 and lib/test/pageName2.dg5 with the names, or names and project paths, of the .dg5 files that you want to load in these <div> elements. In the example, pageName1.dg5 is loaded from the default project, and pageName2.dg5 is loaded from a project named test that is located in the lib directory.