Sitecore fxm Add external website - sitecore-fxm

I wanted to load angular application which generates dynamic DOM. Experience editor is loading only pre-render element and does not able to load dynamic HTML.
Is there any work around on it to load dynamic dom?

Sitecore 8 and 9 by default using the SPEAK framework for rendering the sitecore backend and Sitecore experience editor.
If you really want to use React or Angular you may want to look at Sitecore JSS.

Related

ASP.NET React Redux Template + _Layout.cshtml

I want to develop website with React front-end features and Asp.net for backend and some asp.net views for front-end. I don`t want to use React for the whole application. When I started new project, I used prepared ASP.NET React Redux Template by Visual Studio 2019. Everythink would be fine, but I cant find _Layout.cshtml.
Why do I need this file?
When I choose classic Asp.net mvc template, I can find in this file imports of css, js and also packages like bootstrap.
f.e:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
If I didn`t need classic asp.net views, the template would be helpful. How can I fix it, or where to import files/packages usable also for views?
In the ASP.NET Core + React templates by Microsoft, the Layout is not handled in the back-end with ASP but in the front-end with React. In the ClientApp/src/components folder, you will find a Layout.js file for this usage.
However, nothing stops you to create a partial view _Layout.cs and use Razor Pages / MVC as a React overlay. This way, every page should be handled with an ASP controller. Inside them you would add an empty HTML tag to place your React App if you need it.
In the ClientApp/src/index.js file, you will find the following line:
const rootElement = document.getElementById('root');
You need to replace the element ID by the one where you want to render your React application in the DOM.
But typically, when using ASP with React, the front-end is left entierly to React. ASP is only useful for API controllers handling AJAX requests coming from React, and interacting with a database using Entity Framework.

Remove unwanted CSS from 1 stylesheet - inspecting all my website pages and not only one

I got a project to work on that includes a lot of unwanted CSS within a stylesheet.
I used a few tools like "Audits" (Chrome), "CSS Usage" (FireFox) and "Uncss" Nodejs npm package.
They all output unused CSS for the current page that is refreshed or mentioned in CLI (uncss looks like this: uncss https://example.com > style.css)
I have thought of getting this by template - but the website I am working doesn't have any CMS and templates organized like Wordpress - it is built with Zend MVC Framework and there is no specific organized "templates".
What is the easiest way to clear unused CSS from all of my website in a more efficient way?
I am working on a tool, https://www.bleachcss.com/, that detect unused CSS based on user actions.
Thanks to a little snippet of JavaScript, the tools detect use CSS selector when your user interact with the page and then send a report back to our server.
We then aggregate all the reports sent by all your users, and then we create pull request automatically to remove the unused CSS from the code.
By using real user actions, we are sure to support any kind of website, even pure JavaScript applications. Moreover, we are not slowing down your build system by adding headless browser runs or static analysis into it.
We are still in beta right now but I would love to learn more about your app, so please contact us if you are interested in giving it a spin!

Insert HTML code to the page template via Sitecore CMS

I need to insert Google Tag Manager invocation code to a website powered with Sitecore CMS 6.3 – how do I do that? It it possible without the source code, recompiling and deploying the project? Is it doable at the CMS level? Thanks.
It would depend on how your site was implemented, but this is most likely not doable at the CMS level. You are supposed to put the code for the tag container immediately after the opening body tag. Most sites are not set up to insert arbitrary code at that location.
You do not necessarily need to do a recompile. You could just add the code to your main layout aspx file. However, your organization's deployment process may (and hopefully does) require that even this minor change go through the full build and deploy process.

Embedded image in external component?

I am developing a drop-in component for our company's websites. This component allows users to send messages to each other.
Making this, I've hit several problems during development, such as LoadControl() not working (as it seems to be relative to the project including the module, not the module itself).
I managed to fix this using an approach I found online, but now the next problem emerges - images.
To make the component look somewhat nice, images would be appreciated by the users for icons.
But, again, I am stuck at the same problem.
For instance, if I want an ImageButton, I would set it's ImageUrl property to "~/images/message.png", but this really references something inside my DLL and as such obviously doesn't work!
Is there a standard, good solution for this kind of problem?
Thanks!
You could use WebResources, look at
http://www.aspcode.net/Including-WebResource-in-ASPNET-server-control.aspx
or embedd image in control assembly as resource and serve it with http module, but you will have to declare that http module in web config of application that is using your control.

Running a GWT application (including Applets) inside an IFRAME from an ASP.NET 3.5 app?

We are looking at integrating a full-blown GWT (Google Web Toolkit 2.0) application with an existing ASP.NET 3.5 application. My first gut reaction is that this is a horrible frankenstein idea. However, the customer has insisted that we use this application developed by a third-party.
I have almost NO CONTROL over the development of the GWT app.
My first thought is to actually attempt to embed this in an iFrame. Because GWT is running under Tomcat/Jakarta, it is hosted on a different server from the .NET app so the iFrame src will be to a URL on the other machine.
I need to utilize our own ASP.NET authorization scheme to restrict access to the embedded GWT application. The GWT app also uses embedded java applets, which don't seem to be working right now inside the iframe. The GWT app makes calls to a backend server (using GWT-RPC?).
Any major problems with this approach that anyone can see? Will GWT work on an iframe while hosted on a different machine?
NOTE: SIMPLY ADDING A DIV WITH THE SAME NAME DOES NOT WORK FOR THIS!
To expound on what Tony said, GWT can live on any page. At its lowest level, GWT hooks into a div by its ID or the body element, as its RootPanel, and adds widgets to it from there.
Simply add a div to your ASP page like <div id="gwt-root" /> and in your GWT code, start with RootPanel root = RootPanel.get("gwt-root"). Then you can start adding widgets to that panel to build the GWT portion of your page.
You'll also need to bring in your GWT generated code with a script tag, like so:
<script type="text/javascript" src="gwt-app-name/gwt-app-name.nocache.js">
Also, if you want, GWT can interact with the rest of the page using regular JavaScript using JSNI.
you do not need an IFRAME. Writeyour application so that the main panel is hosted inside a div with a specific id. If your ASP.net can provide a div with the same id, then all you have to do is include the generated JavaScript files (+ some style sheets) and your application will display inside the div.

Resources