Web Extensibility

The GigaFox web UI can be customized through extensibility points.

View Extensions Changes

All of the view extensions are located in usr/local/deviceconnect/Web/Content/Client/Views/.

Normal page: HeaderAppend.html deviceViewer Web: ViewHeaderAppend.html	Contents are appended to the end of the header, used to add any additional script or link tags.
Normal page: HeaderMetaOverride.html deviceViewer Web: HeaderViewerMetaOverride.html	The content on these files will override the title element, meta elements for descriptions and author, and shortcut icon link elements.
FooterAppend.html	Contents are appended to the end of the footer on the login and normal pages. This does not change deviceViewer Web.
LoginBoxAppend.html	Contents are appended after the Submit button of the login dial.
/usr/local/deviceconnect/Web/Content/Client/Scripts/.js and /usr/local/deviceconnect/Web/Content/Client/Css/.css	All files, no matter the directory depth, are included in every page and deviceViewer Web as JavaScript or CSS.

After making the changes, restart GigaFox services.

AirStreamEx root level object is used for GigaFox extensions into existing JavaScript. This object must be defined inside a JavaScript file included in the above folders. Every entry to this object is optional. Without the object, default is used.

For more information on AirStreamEx , go to developer.mozilla.org

Example:

   window.AirStreamEx = {
    entryName: "entryValue",
    anotherEntryName: "another value"
   };
   window.AirStreamEx["thirdEntry"] = ["more", "values"];
    

Web viewer title bar is a function that accepts an IDevice object and allows the custom titlebar to be returned. To properly apply this change, the title before receiving device information must be overwritten with HeaderViewerMetaOverride.

Example:

   function (device) {
    return device.name + " has the serial " + device.serialNumber;
   }
    

AirStreamEx configuration for the web viewer title:

Name	webViewerTitle
Type	(device: Data.IDevice) ) string
Default	function (device) { return device.name + " - GigaFox"; }
Empty	"{device.name} - GigaFox"

   name: string;
   vendorDeviceName: string;
   model: string;
   operatingSystem: DeviceOperatingSystem;
   operatingSystemVersion: string;
   macAddress: string;
   serialNumber: string;
   manufacturer: string;
   friendlyModel: string;
   vendorUniqueIdentifier: string;
   isAudioEnabled: boolean;
   availability: DeviceAvailabilityStatus;
   location: string;
   enabled: boolean;
   deleted: boolean;
   slotNumber: number;
   notes: string;
    

Customize Columns in Device List

AirStream Ex configuration

Name	deviceListColumnDefaults
Type	string array
Default	["showModel", "showOS", "showSlotNumber"]
Possible Values	showModel, showPlatform, showOS, showManufacturer, showSerialNumber, showVendorName, showVendorUniqueIdentifier, showOnlineSince, showOfflineSince, showRetainedSince, showSlotNumber, showNextReservation, showNotes
Empty	Undefined behavior

Selectors

Some elements have extensible classes defined to reference from JavaScript or CSS. These classes are always prefixed with ex- and their support is preserved between deviceControl versions.

Footer selectors should work on all pages. They have no effect on deviceViewer Web.

Examples

HeaderAppend.html

ex-support-email can be used to change the support email address found on the connection interruption overlay and error page instances in GigaFox:

   <div> style="background-color: Green; color: White;">Hello World!</div>
   <script>
     $(function() {
      var el = $("<div>Nothing yet!</div>")
        .prependTo(document.body);

        var counter = 0;
        setInterval(function() {
          el.text("Counting " + counter++);
        }, 1000);
    });
   </script>
    

Example Script

   $(function() {
    $(document.body).css({ backgroundColor: "Red" });
   });
    

Example CSS

   .navbar-header { display: none; }
    

Example Extensibility CSS

   .ex-footer .ex-copyright { background-color: Brown; }
   .ex-footer .ex-about-link { background-color: Red; }
   .ex-footer .ex-about-link:after { content: "!!!!!!!!!"; display: inline-block; text- -
    style: underline; }
   .ex-footer .ex-about { background-color: Green; }