I have tried various tricks but nothing seems to be working :(
Steps:
Driver Data coming from SQL Server as Direct Query with IFrame Content (This makes rest call to some web service) as Column
Using HTML viewer visual to show IFrame content
https://appsource.microsoft.com/en-us/product/power-bi-visuals/WA104381214?tab=Overview
By default I just want to show Google.com on HTML but when they select any row from the list it pass HTML content for the selection to the HTML viewer. Is it possible!!!
I have tried selectedValue, IsCrossfiltered, HasOneValue all sort of tricks to see if it allow me to switch to default value when there is no selection and actual value when you click any row to crossfilter.
Without Selection
With Selection
Need HTML content except Google.com while do selection!!!
found this while searching how to embed HTML code into my report.. Not really an answer though.
"A final note: Not all web pages can be rendered in an iframe. Some websites such as Google and Amazon do not allow their content to be hosted on another site via iframes. Keep this in mind when using this trick"
https://powerpivotpro.com/2018/11/dynamically-embedding-web-pages-in-power-bi/
Related
Background:
I need to allow users to create web pages for various products, with each page having a standard overall appearance. So basically, I will have a template, and based on the input data I need the HTML page to be generated for each product. The input data will be submitted via a web form, following which the data should be merged with the template to produce the output.
I initially considered using a pure templating approach such as Nunjucks, but moved to ReactJS as I have prior experience with the latter.
Problem:
Once I display the output page (by adding the user input to the template file with placeholders), I am getting the desired output page displayed in the browser. But how can I now obtain the HTML code for this specific page?
When I tried to view the source code of the page, I see the contents of 'public/index.html' stating:
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Expectedly, the same happens when I try to save (Save As...) the html page via the browser. I understand why the above happens.
But I cannot find a solution to my requirement. Can anyone tell me how I can download/save the static source code for the output page displayed on the browser.
I have read possible solutions such as installing 'React/Redux Development Extension' etc... but these would not work as a solution for external users (who cannot be expected to install these extensions to use my tool). I need a way to do this on production environment.
p.s. Having read the "background" info of my task, do let me know if you can think of any better ways of approaching this.
Edit note:
My app is currently actually just a single page, that accepts user data via a form and displays the output (in a full screen dialog). I don't wish to have these output pages 'published' on the website, and these are simply to be saved/downloaded for internal use. So simply being able to get the "source code" for the dislayed view/page on the browser and saving this to a file would solve my problem. But I am not sure if there is a way to do this?
Its recommended that you use a well-known site generator such as Gatsby or Next for your static sites since "npx create-react-app my-app" is for single page apps.
(ref: https://reactjs.org/docs/create-a-new-react-app.html#recommended-toolchains)
If I'm understanding correctly, you need to generate a new page link for each user. Each of your users will have their own link (http/https) to share with their users.
For example, a scheduling tool will need each user to create their own "booking page", which is a generated link (could be on your domain --> www.yourdomain.com/bookinguser1).
You'll need user profiles to store each user's custom page, a database, and such. If you're not comfortable, I'll use something like an e-commerce tool that will do it for you.
You can turn on the debugger (f12) and go to "Elements"
Then right-click on the HTML tag and press edit as HTML
And then copy everything (ctrl + a)
I am trying to have a single GAS project that changes its UI by serving up different HTML pages based on what the user clicks. I cannot figure out how to serve up different HTML from the script, replace the current browser page and retain state. Any help appreciated. Thank you.
I use two options:
Have a main page which has buttons or text areas with onchange set to a function which calls back to the server side and gets new page data, then replace the current page or a portion of the page, with the new page.
Pass parameters in the URL and have the server side doGet() parse the parameters and branch to load a given page based on these values.
I have used a combination of both of these effectively. Basically I have a div which has my "menu" and a div which is the section to be replaced. My menu changes and then data is sent back to the server to get the dynamic body. The HTML is returned and then I replace using innerHTML.
In the same code I offer the ability to pass menu values via the published URL. This allows me to go directly to some values if I so choose as I have a Google Site where we embed the script into pages and the menu selections may be specific to that page. It allows us to use an iFrame to show the web app and go directly to the pertinent interface.
With google.script.run you can run any script on the server from the html page. By communicating with the server you have access to PropertiesService which gives you the capability to store information between pages. Personally I like the HTML Service createHtmlOutput(html) because I can edit the html without having to edit a separate page.
I decided to answer your question here so that I could use the code section.
Question:
I am actually looking to avoid manipulating the HTML and serve up a
completely different HTML file stored in the project. How do I make
the page call the script again and replace itself with the new
content?
We I'm guessing that completely replacing the page is not really what you want because the user will suffer a page refresh. But you could create divs like this:
<style>#R01{display:none;}</style>
<div class="replaceable" id="R01"></div>
If you put all your replaceable content in divs like that then you can request content from the server via calls like this:
google.script.run
.withSuccessHandler(updateConversation)
.withFailureHandler(showStatus)
.getConversation();
and put the new content into the appropriate divs and then change the css with another pair and turn the old content off and the new content on. Thereby avoiding a page refresh. Don't forget to save the old data into the PropertiesService first. So I don't think changing the entire page is the way to go but I could be wrong. I think just changing some of the internal content will avoid the need for a total page refresh. If you want to change images you can avoid another download by using CSS Sprites
I am using Access 2013 with our enterprise Office 365 Sharepoint site to create a simple Access App. I'm unsure of all the terminology--the main point is that this is an Access App as opposed to a desktop application. I am wondering if there is a way to display an image on a list view, where the image source is a data field. Here's what I can do so far and where I get stuck:
I can add a picture control. I can set the picture to a permanent URL that displays just fine in the view. However, this is a permanent setting for the view of any record.
I can add a URL field to the table. It's easy to pick the URL in datasheet view, and on list view, it's difficult to change the URL, but clicking on it will pop up the image (or whatever link) in a new tab or window.
I can create a Web Browser Control. I can have this control source be the URL frame. When I look at this view using an IE browser, I get something that looks like an iFrame. However, no matter what URL I try, the content will not load.
More clarification here: Depending on whether I try Flickr or an image hosted on my own OneDrive, I get different errors. One of the errors I get (tyring to use my own OneDrive with publicly shared image) is: "To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame."
More information: If I link to a publicly shared image from Google Drive, then the Web Browser Control does in fact show the image. This is not ideal, and I'd rather be able to dynamically change the link for the Picture Control, as opposed to embedding web content.
This is where I am stuck on two avenues. (A) The Web Browser Control will not show any content (maybe this is a security setting of my institution's Sharepoint 2013?). And (B) I cannot figure out how to dynamically change the URL for the picture control. Option B may be possible with a macro, but macros in Access Apps are different than desktop version and much more limited in capability. And I'm not good at either set of macros. Thanks for any ideas!
Ok, so I'm asking this to document my solution and will answer it myself but any improvements on my method are welcome.
The problem:
I need to render a report to both an html page embedded in an iframe (so it needs its own url) and to pdf.
The report includes an out of the ordinary graph which is not supported by any graph api I've seen.
My site uses the Joomla! CMS (V. 2.5.*) which means my backend is php and mysql.
I need the report to render without interference from the default template set on Joomla.
I'm running on a linux host, (basic LAMP).
Joomla uses the base tag in their html which screws up svg's url().
My solution involves the following: wkhtml2pdf, js, url parameters, and writing a joomla component.
I wrote a basic Joomla component with two site views, one that generated the report in html and one that displayed the report view in an iframe. So the report has a url to access it at, and I have a way to embed it. The component also had the js and css for generating the report extracted out to separate files for including in the media folder (but that was just for code cleanliness not functionality).
The report view had to do the following modifications to the page header to get the report to render right (save for the graph) otherwise the resources were loaded at the wrong times:
$document = &JFactory::getDocument();
$document->setBase('');//base tag screws up svg urls so get rid of it
$document->addscript('http://www.google.com/jsapi');
$document->addscript(JURI::root(true).'/media/com_metahealthzone/javascript/chart.js');
$document->addStyleSheet(JURI::root(true).'/media/com_metahealthzone/css/chart.css');
The url used in the iframe had to have ?template=system appended, tmpl=component didn't work as the css from the template was still applied.
To get the Google visualization to look right I added javascript to the end of the OnLoadCallback to grab the svg and add a linearGradient as a child of the defs tag with id="svg_grad" (why Google doesn't support gradients, I don't know) then grab all the elements in the graph that needed the gradient and set their fill to 'url(#svg_grad)'. Remember to use setAttributeNS because of the svg namespace, and make the gradient stop tags be children of the gradient not of defs.
I still have to do the tweaks for VML (stupid IE).
There were some issues with wkhtml2pdf that I had to overcome too. When you add an element to the DOM using js it doesn't behave like other browsers. You must keep the returned handle because you can't get the new element using document.getElement* type functions. Also you have to instruct wkhtml2pdf to wait for the js to run using --no-stop-slow-scripts or the graph won't show up (it's slow). I also had to impersonate the user's session by setting the cookie for wkhtml2pdf using the --cookie <name> <value> argument.
I have been reading the dev guide but haven't been able to work out how to put my own codes into webpages
I know it is possible because AVG uses it (in it's link scanner), and FastestChrome extension uses it too (highlight something and a link to a search pops up).
I have a backgrounded page but I can't get it to effect the webpages I go on (permissions are correct as I can get css to effect)
I am probably missing something really simple :/
It's not intuitively presented in the documentation but your background page can not access the current webpage b/c they are in different contexts. In other words the background page is it's own separate page so it has no access to any other page's DOM.
If you want to affect the page the user is viewing in the browser you will need to use what is referred to as a "content script".
If you want to communicate between content scripts and the background page you will need to refer to the message passing API. Check out my extension's source code for reference. I do exactly that.
Just remember...
Background Page: used for general logic in your extension, not anything page specific.
Content Scripts: are loaded into every page the user sees, and can manipulate that specific page.
Those probably use Content Scripts to inject Javascript into webpages. These scripts run in the context of the web pages and can access the DOM.
You can either define a script to always run in a web page by declaring the script file in the extension manifest, or you can use your background page to inject a script when needed.