I would like to use the Buildfire Custom Plugin to create a home page for my app. From there I need to link to external websites and internal plugins using Deep Linking.
When I target deep links I get a mixed content error:
Mixed Content: The page at 'https://app.buildfire.com/#/pluginControl/01331574-e5fc-4d9e-b226-ecd69029358b/01331574-e5fc-4d9e-b226-ecd69029358b-1549414186849/New%20Home/3000dd44-17a3-464c-a438-d31843d7cbe4/false?headerId=5c5a2f2b236aa005d368b399' was loaded over HTTPS, but requested an insecure resource 'app0070be://plugin/169d5e94-6c5e-4769-b4ca-a7d0175985e7-1528925513379'. This content should also be served over HTTPS.
Here is the code I'm using:
var search = document.getElementById("search");
search.addEventListener('click', function() {
console.log("Search"); // I am seeing this in the console prior to the error.
document.location('app0070be://plugin/ba4139dd-09c6-4121-aa4a-c72570af07fc-1490476490653');
});
Is there a way to make this secure? Is there a better / different approach I should consider?
Related
I'm trying to implement Esri ArcGIS JS in Lightning Web Component. While using ArcGIS JS, the sample code uses require function to load modules. In order to do that I'm trying to use require.js. I downloaded it from here (Require.js). And then uploaded to my sandbox as static resource. I'm trying to use that static resource in my Lightning Web Component. I also added the script tag for the ArcGIS Javascript API in my Experience Cloud site's header as
<script src="https://js.arcgis.com/4.24"></script>
Lightning Web Component:
import { LightningElement, track } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import requireJS from '#salesforce/resourceUrl/requireJS';
export default class TestMap extends LightningElement {
renderedCallback() {
loadScript(this, requireJS).then(() => {
console.log('requireJS loaded');
require([
"esri/geometry/Extent"
], (
Extent
) => {
var initExtent = new Extent({
xmin: -15884312,
ymin: 1634835,
xmax: -6278767,
ymax: 7505198,
spatialReference: 102100
});
});
}).catch(exception => {
console.log(exception);
});
}
}
My problem right now, eventhough I can see in the Network tab that the require.js is loaded from static resource, require function cannot be found.
Exception message catched
I'm not sure where is the issue since this is how I loaded my all javascript files before.
I was expecting to see the the require function is working after the require.js script loaded from Static Resource.
This one is a bit tricky, I will try to guide you as much as I can.
First, don't put the script tag in your website header. This is a last chance solution, we'll keep it if nothing else work.
Second, requireJS is not compatible with LWC (or Locker Service to be precise). So you can forget it. loadScript is in someways similar.
Now the solution, usually I download the whole from a CDN and host it as a static resource. Then you can load it via loadScript and use it as per the documentation.
In case the library is really small, it could be created as a LWC and then be imported but usually libraries are too heavy regarding Salesforce limit.
Looking at the library, it seems that they do not provide any compiled full version (which is probably huge). In this case I would recommend to make a custom build locally containing only the necessary pieces of code and then uploading as a static resource. Unfortunately I can't help on this part as I still didn't do it myself yet.
Feel free to comment and I will improve my answer is it's unclear.
I'm new to this frontend world, I have some knowledge on React and GraphQL and that's why I've decided to try and implement a test blog with Gatsby, as it seems pretty popular and easy to use.
I also wanted to get my hands into Material UI so I'm using this Gatsby starter : https://www.gatsbyjs.org/starters/Vagr9K/gatsby-material-starter
This starter seems to have included the integration with Netlify CMS, so I wanted to change that and start using Strapi CMS, so I can have the content there.
Any idea on how to do this?
There's a lot of stuff in your question, I'll try to answer it step by step if not, please let me know if you need more details of how to create pages, etc and I will update my answer to add more details if needed.
If you want to change your source from Netlify to Strapi you need to set it up in your gatsby-config.js, replacing gatsby-plugin-netlify-cms plugin for something like that:
{
resolve: `gatsby-source-strapi`,
options: {
apiURL: `http://localhost:1337`,
queryLimit: 1000, // Default to 100
contentTypes: [`article`, `user`],
//If using single types place them in this array.
singleTypes: [`home-page`, `contact`],
// Possibility to login with a strapi user, when content types are not publically available (optional).
loginData: {
identifier: "",
password: "",
},
},
},
Note that you'll have to install your desired plugins and remove the unnecessary in order to reduce the bundle package and improve performance when using starters.
The next step is to create pages from your source CMS (articles, posts, pages, etc) using GraphQL. Maybe this blog helps you. But as a short summary, you need to create queries in your gatsby-node.js to retrieve data from Strapi CMS and create pages using Gatsby's API.
The idea is the same as from your starters, however, instead of using gatsby-source-filesystem and using allMarkdownRemark in your page creation, you will use the object provided by Strapi CMS. You can check the queries and the available objects using gatsby develop and entering to localhost:8000/___graphql.
Keep in mind that you will always query static data (i.e: pre-downloaded data) from your multiple sources so when you run the develop command, the data is downloaded and accessible via GraphQL.
You can check for further information in its starter repository.
I have the following content page: /folder/_new.cshtml
My intention is to have the page accessible through the following url: /folder/_new
However it seems that such file name is not mapped to the url. Is there any workaround to make it happen, perhaps by assigning a custom route instead of relying on the pretty-url-by-default feature?
This is a pre-defined restriction for not allowing views starting with a _ prefix to be called directly, the restriction can be removed when you're registering the ServiceStack.Razor plugin with:
var razor = new RazorFormat();
razor.Deny.RemoveAt(0);
Plugins.Add(razor);
Has anyone successfully implemented drag and drop with files from desktop to the app?
I've tried just putting this drag 'n' drop example into the index file but I just get this error:
Can't open same-window link to "file:///C:/Users....whatever"; try target="_blank".
Please share your stories, what you've tried and if you have succeed :)
Some resources to help you:
New Chrome Packaged Apps codelab that we've been working on covers drag-and-drop in both AngularJS and pure JavaScript.
AngularJS drag-and-drop: https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_data/angularjs/2_drop_files
JavaScript drag-and-drop: https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_data/javascript/2_drop_files
There's an early version of docs too for AngularJS drag-and-drop for Chrome at developer.chrome.com/trunk/apps/app_codelab5_data.html#handle_drag_and_dropped_files_and_urls
We're working on the docs to cover both samples though.
I have done this a while ago and it worked.
The problem you've got is that you are creating a file url, then trying to navigate to the url. The navigation is failing, not the read. It's failing due to CSP, and you probably won't be able to override that with a different CSP due to security restrictions we've placed on allowable CSPs.
But, you should be able to just read the file and use the content. You need to change that sample code to use ReadAsText or ReadAsArrayBuffer instead of readAsDataURL. Look here for more details.
Please let us know how you get on!
Just listening for drop won't work. You will have to prevent the default functionality of dragover.
document.body.addEventListener('dragover', function(e) {
e.preventDefault();
}
document.body.addEventListener('drop', function(e) {
alert('it works!')
}
I am trying to create an extension ('XML Uploader') with a backend module and a frontend plugin also.
The backend module will be used for managing xml files (upload, validate against a DTD), and the frontend plugin should be used for displaying the uploaded xmls.
The problem is with the frontend part:
I followed
the basic extension tutorial - added a new page, created a content element of type 'Insert plugin' - but when trying to add a new record, the type 'XML Uploader' does not appear in the list of new record types. Moreover, the changes made to class.tx_xmluploader_pi1.php have no effect.
So how should I work with the frontend plugin? Or would it be better to create a separate extension instead?
Any help would be very much appreciated.. Thank you.
When creating your table with the extension kickstarter you must check the "Allowed on pages:" checkbox to allow records from this table to be created on regular pages.
If your changes have no effect, it could be that the page is cached by typo3. In that case you can clear or disable the cache with the admin panel or in the page configuration menu.
You have to include the static template of your extension (I presume you used the kickstarter or extension_builder):
go to the your template, in the object browser you should see something like:
plugin.tx_xmluploader_pi1 = USER
if you can't find it, edit your template (edit/modify => edit whole template record) and add your extension template in the tab 'Includes'
Additionally, check your ext_localconf.php for the line
t3lib_extMgm::addPItoST43($_EXTKEY, 'pi1/class.tx_xmluploader_pi1.php', '_pi1', 'list_type', 0);
This is where your FE plugin is being registered.