0

The Goal

I am trying to build a KPI (Key Performance Indicator) dashboard for our company.

I explored various dashboard softwares like Geckoboard but theres out of box integrations don't serve up a data well. Some tools have great API options but thats would take a large investment from our company which were not ready to commit to.

Approach

My approach will be to use the dashboards from our key softwares tools like Jira, Confluence, Aha!, Google Analytics.

What I plan to do is build single page dashboards that will cycle between each other using a Chrome extensions that cycles through browser tabs.

Each page will need data from various tools, for example, a widget from Jira, Pull request from Github, Live Users from google analytics, google docs etc.

Execution

I have two choices when loading in pieces of data, both require Iframes.

Option 1: Next Iframe in a DIV, style the div with overflow:hidden and use margins on the IFRAME to crop the page.

example

Option 2: Use JQuery to pull an DIV #ID from a page into an IFrame, see:

Example

Technology

I would like to build these single pages with Angular 2, as I like using the angular-cli tool and its also our companies chosen MVC.

I could use Option 1 but i can't guarantee the data I want cropped will always be in the same spot. I have been working with Option 2 but get....

The Error:

localhost/:1 XMLHttpRequest cannot load URL. Redirect from 'URL' to 'URK' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

The Ask

Working with Iframes has been tough and am looking for a good reference for what it is I am trying to do. I work as a designer so don't have a great wealth of programming knowledge, If anyone could provide a good description on how I can add pieces of IFrames into an angular application that will only be served up locally would be very much appreciated

Current Code:

dashboard.component.ts

import { Component, AfterViewInit } from '@angular/core';
declare var $:any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
  title = 'Dashboard!';
    constructor() {
   }

  ngOnInit() {
  }

  ngAfterViewInit() {
      $('#daysRemaining').load('URL #gadget-17301');
  }
}

DOM

<h1>Title</h1>
<iframe id="daysRemaining"></iframe>

Note: JQuery CDN is loaded in index.html

Bromox
  • 567
  • 2
  • 9
  • 29
  • The error you are gettings is from CORS issue. It means that you are trying to create request from 'server 1' to 'server 2' and 'server 2' is not allowed to return responses to unknown servers/clients/etc. Enable CORS on the back-end and make sure you have in your responses from that server header with 'Access-Control-Allow-Origin: {your server ip / domain name}'. https://enable-cors.org/ for more information. – Bogdan Bogdanov Jul 11 '17 at 22:35
  • Thank, I did know that issue but there is no clear way on how to enable this using the angular-cli tool, I was hoping to find a clear answer on what I need to do to get this to word. Please note I have very little programming knowledge so header returns is beyond my understanding. cheers – Bromox Jul 11 '17 at 22:38
  • It is a feature you have to enable in the back-end. Angular-CLI has no power here xax. If I am not so busy tomorrow I will create a better answer for you. What are you using for API? – Bogdan Bogdanov Jul 11 '17 at 23:08
  • Theres no API here at all. I want to load an Iframe of various websites showing specific sections. I would use styling but I can't the object will always be in the same place or size. These are websites like google analytics, google docs etc. I will have no control over these sites. I just want to Iframe divs that have IDs on them. See option 2 above, but i get the CORS error. – Bromox Jul 11 '17 at 23:11

0 Answers0