Rendering a React Widget on third party site - reactjs

i'm looking for some advice on how I should go about creating my next project. I would like to create an app that allows users to embed widgets on their own personal sites. An example would be, the user could create events on my app, and then copy code to embed on their site that would display the events.
My hope was that I would be able to give them a minfied/uglified script that would handle fetching their data from my app's api, and even possibly allowing someone using the widget to post data to my app. Is that feasible?
What I am really unsure of :
1) How would I handle fetching data from my server? Are there CORS/other concerns I need to handle when fetching it?
2) I dont want users to have to go to a url to render my code, I just want to provide the minfied/uglified/compiled to es5 code to them. How do I go about doing that?

Related

Generate shareable link feature in Django?

I have a Django Rest Framework application that is fed in data from a csv. I then use React to create dashboards and Widgets from that data. I want to be able to generate a link to share a read-only version of any dashboard, much like in Google docs etc. Anyone clicking on that link will be able to see the dashboard with all the charts and analytics etc. The link can be shared much like how you share a Google Forms link. I'm not sure how to go about doing that. Any help / pointers would be appreciated. Thank you!
I think theoretically you need to use a router on your react app (e.g. https://reactrouter.com/ ).
If you're using create-react-app, you can also refer to https://create-react-app.dev/docs/adding-a-router/#:~:text=Create%20React%20App%20doesn't,is%20the%20most%20popular%20one.) .
With this you can directly read parameters on a certain page within your react app, that you can then use to build a concrete call to the backend, to retrieve the necessary data to build your dashboard.
The 'link builder' functionality most likely needs to be implemented on the backend, so you can have the necessary parameters you need to gather the necessary data, maybe by using query strings.
If you want to make it more complex, you would need to implement on the backend a kind of tokenized access, that could store the full call parameters on the backend side, and associate them with a token of some kind, that you could then provide to your clients.
e.g. : http://djangoappxpto.com/link/12345abcd points to a react page component that then executes a fetch to http://djangoappxpto.com/api/getStats/12345abcd which once received by python would internally mean something like http://djangoappxpto.com/api/generateStatsReport/?param1=a&param2=b&param3=w&param4=aa .

Rendering Just one module/state of Angular app

I've angular app with lots of states and modules etc. Now, I want to send a link to the user. When user'll hit this url, I want to redirect him to a new tab rendering only that particular state (specified in URL) i-e I don't want anything else to be visible to the user. Or you can say, I want to open a popup window rendering that particular state's html in popup window . This is the approach that comes to my mind to sort it out.
Ps. There are Rest APIs at the backend which I am calling through angular resource service to bind data with the model of the views
Option
I've rest APIs on backend, So, I was thinking to developing s separate Nodejs application, And I will send nodejs application url to the user and in the default/home route I'll call backend API and, the returned resultset will be rendered in html file within nodeJs application and this way, I'll render the corresponding data to user's browser window.
This is the flow for that
I don't know if that is right or clever approach. Please suggest me what will be the best approach to sort it out.
Thanks in advance.
This is what my app looks like
Everything in the left side-nav is a module and clicking on this I am routing to a different state. I am using angular-material and lots of other dependencies in this project.
And this is what I want.
I'll refer a link to the user for example www.myapp.com/specificpage.html. And hitting this url, a new tab/popup will be opened rendering state defined in the same app but with some non-editable url. And it should like.
There are multiple ways to achieve this and each approach has advantage and disadvantage. You have to choose depending on requirement and architecture. Details are below-
Create a separate app - You can do it through separate code base or use the module based build process and include this module only for new app.
Divide application is two part, public pages and private pages - Include this page and required APIs for this page in the public modules for your app.
Send token in the link - If you want to make secure page, send short lived token in the eMail and validate token on the server before displaying page to the user.

Add databound dropdown to Azure API App logic app shape

I have developed an azure API app that I am using in a logic app. For the purpose of this post, it doesn't matter what my app does.
In my logic app shape (Azure API App) I have managed to render a drop down list by making one of my API post params an ENUM. Then changing the swagger / swashbuckle configuration to render the definition differently.
This is a good start but I really need a data driven drop down that reads it's data from a constantly changing data source (blobs, documentDB for example but it doesn't matter).
I can't find any posts on this.
All help will be greatly appreciated
Great question - we have on our backlog to support what we call "Dynamic Swagger" that lets you do just this. I'm hoping it will be in production near the beginning of March. In the meantime you will need to just enter in the values of those fields manually.

Cakephp3 handle authorization as a plugin

I've been working on cakephp3 for a while now. I've always used Cakephp's Auth component for authorization and authentication purpose.
I follow the very conventional procedure every time, like loading the component, adding isAuthorized function in controllers and defining allowMethods etc.
But now what I want is to develop my own plugin for this purpose, just using Cake's Auth component. So that i can reuse the plugin in all my future projects, also i want it to be like plug and play. Like You enable it, add few settings and your User management is done.
I know that how migrations work so I can add users table via migration every time. (Just an idea)
The thing I don't get right now is how to make everything separate from the core app? Like everything is done via plugin and nothing is added to every controller of the app.
Hope I'm clear about what I want to achieve.
Update: I know there is a whole list of third party Auth plugins. But I want to develop my own so i just need the idea of how things work.
Any solutions to my problem would save my day.

How to interact Users(input form data) Using Salesforce Sites into the SalesForce Application(to Custom objects)

First of all I'm really sorry if i'm asking a Dumb Question. But unfortunately i can't find out a way to take inputs for my salesforce Application.
I am developing a simple CV Management app, but i can't figure out how to interact users(input data) to the App? I have created Candidate Custom object, and manually i can create the Candidates, but my requirement is to create records by Candidates themselves.
I followed SalesForce Tutorials and i found out a way to display data using VisualForce Custom Pages. But what i want to## Heading ## do is when i giving a link to the user, he can go to that link and there having form to fill with his personal data, and submit only. But i'm just confused how to user input data map with our Custom Candidate object fields.
when i'm searching i saw some FormAssembly and Custom VisualForce Pages. But Problem is I don't hope to use any 3rd party apps.
Tutorials says that;
In the past, to make Force.com data available to the general public, you had to set up a Web
server, create custom Web pages (JSP, PHP, or other), and use the API to integrate Force.com
apps with an external website. This is no longer the case, thanks to Sites!
Please if you can, help me Friends, Really Appreciate it & Thank you soo much..
You'll probably want to do something along these lines...
Create a Visualforce page with standard controller set to your custom object which is the "CV Entry" page (to send candidates to)
Create a Force.com site in your salesforce org to allow public or restricted access to the page
Setup page authentication/permissions as required

Resources