I am trying to embed typeform into my angular application using typeform’s Embed SDK.
<div data-tf-widget="<form-id>"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
But however, in my use case I need to dynamically pass the form-id which is obtained from the typeform API response to the above div element.
I have tried adding data-tf-widget="<form-id>" attribute to the element dynamically. It’s getting added but the form with the specified id is not getting rendered in the UI.
Is there are way to achieve this? or Is there any api/method/listener provided by the library, that helps me to re-render the element with the provided form-id?
If there is any API available for typeform submission, that would be helpful.
Thanks in advance.
I am trying to embed typeform into my angular application using typeform’s Embed SDK.
<div data-tf-widget="<form-id>"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
But however, in my use case I need to dynamically pass the form-id which is obtained from the typeform API response to the above div element.
I have tried adding data-tf-widget="<form-id>" attribute to the element dynamically. It’s getting added but the form with the specified id is not getting rendered in the UI.
You can use the createWidget method:
<div id="tf"></div>
<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
window.tf.createWidget('<form-id>', {
container: document.getElementById('tf')
});
</script>
Have a look at the documentation for more information on how to pass more parameters, hidden fields...
Related
I am developing a chrome extension using angular 11. For building the project I have used custom-webpack and provide the entry point to background.ts as suggested in blog: Link.
<div class="container">
<span><b>Steps</b></span><br>
<span *ngFor="let step of steps;">
{{step}}<br>
</span>
</div>
I am using the above snippet of code in my app component template. Items are getting pushed to steps array at runtime, If I log the steps array in console, I am seeing that items are being pushed to array but not rendered to UI.
Please help me to find out like how I can make use of ngfor in the chrome extension. For developing the extension, I referred to the above said link.
AADSTS50194: Application 'censured'(-app) is not configured as a multi-tenant application. Usage of the /common endpoint is not supported for such applications created after '10/15/2018'. Use a tenant-specific endpoint or configure the application to be multi-tenant.
How can I use single-tenant specific endpoint? I want to create a file picker that permit user to browse its file and organization files. I already read this question but, without editing OneDrive.js (library), I can't change
https://login.microsoftonline.com/common
to
https://login.microsoftonline.com/MY_TENANT_NAME
Hope you can help me, thanks.
because the onedrive.js library has the common endpoint hard coded, your easiest way is to change it to point to your tenant login endpoint.
if you don't want to do that, have the user login before using the picker, then save the access token and endpoint and provide it to the js
similar to whats being done here: https://github.com/OneDrive/onedrive-explorer-js/blob/master/index.html
as per https://learn.microsoft.com/en-us/onedrive/developer/controls/file-pickers/js-v72/open-file?view=odsp-graph-online#advanced-options the advanced options of the picker gives you options to specify the endpointhint and accesstoken.
hope that helps,
Update
I just tried it this way and it seems to work. but I didn't try to do it with a token. just an endpointHint, when I used an endpointHint, it didn't give me the error about the multi-tenant issue.
<html>
<head>
<script type="text/javascript" src="https://js.live.net/v7.2/OneDrive.js"></script>
<script type="text/javascript">
function launchOneDrivePicker(){
var odOptions = {
clientId: "myappid-guid-thing",
action: "query",
multiSelect: true,
advanced: {endpointHint: "https://azuretenant-my.sharepoint.com/",},
};
OneDrive.open(odOptions);
}
</script>
</head>
<body>
<button onClick="launchOneDrivePicker()">Open from OneDrive</button>
</body>
</html>
Please make sure you get the endpoint url right, eg, https://tenantname-my.sharepoint.com notice the "-my" after your tenant name, that's necessary.
I'm trying to customize the page UI on Azure AD B2C unified sign in/sign up page.
I was able to create my template and upload all the assets i.e. html page, images and css to my Azure Blob Storage container with the right CORS settings.
When I pull up the page, however, it looks absolutely HORRIBLE! It doesn't seem to support Bootstrap. I read somewhere that no JavaScript is allowed. Is that the reason for this?
Once I upload my custom HTML page, Azure AD B2C seems to be stripping off a lot of the design elements necessary for my customization such as id and style in my body tag -- see below:
<!-- Omitted for brevity -->
<body id="my-login-class" style="url: ('https://myazurestorage.blob.core.windows.net/my-container/my-bg-image.jpg')">
<div id="some-important-id" class="my-important-class">
<div class="col-xs-8">
<div>Some important message</div>
<div>
<div class="col-xs-4">
<div id="api">
</div>
</div>
</div>
</body>
When I inspect the page source once my custom page is rendered, I see that all my classes and Id's are removed along with Bootstrap references e.g. css and js.
Am I getting this right? No Bootstrap which means Azure AD B2C only supports customization of the most basic kind?
Your HTML template can include any external, head, or inline styles but it can't include scripts.
An example of a customized page can be found at the WoodGrove sign-up or sign-in page.
The HTML template for this customized page can be found in the WoodGrove GitHub repository.
This HTML template includes Bootstrap's Reboot styles as well as the WoodGrove's specific styles.
Azure AD B2C creates the head and body elements and then copies the child elements for each of these head and body elements from your HTML template to its HTML document.
Therefore, you shouldn't add attributes to the body element in your HTML template, because they aren't copied.
You can import the bootstrap references. Please see this document: https://learn.microsoft.com/en-us/dynamics365/customer-engagement/portals/azure-ad-b2c
See also: https://github.com/Azure-Samples/active-directory-b2c-php-webapp-openidconnect
It looks horrible for a reason. No styling is applied to the page so that it can be fully customizable. You can reference Bootstrap for CSS; however, I have run in to issues when using bootstrap.js for modals since it appears the Azure B2C API uses bootstrap for modals...In my experience, it is best to rely on Vanilla JS and to leave off any references to third-party JS.
It is possible to use JavaScript if you are using your own custom policies. There are some limitations to JavaScript and the best approach is to try to accomplish anything using the policy first.
To enable JavaScript use the following as guide:
<RelyingParty>
<DefaultUserJourney ReferenceId="SignUpOrSignIn" />
<UserJourneyBehaviors>
<ScriptExecution>Allow</ScriptExecution>
</UserJourneyBehaviors>
...
</RelyingParty>
When referencing external CSS/JS files, the URL must be absolute. This is true for the head section of HTML files as well as any references within JavaScript. Relative URL's can only be referenced within a CSS file.
Incorrect:
<link href="./css/assets.css" rel="stylesheet" type="text/css" />
Correct:
<link href="https://your-storage-account.blob.core.windows.net/your-container/css/assets.css" rel="stylesheet" type="text/css" />
I have recently made a chat bot and am seeking to further edit the components of the interface by adding a minimizing button and an anchor so that the Chatbot is statically secured to the bottom right of the page (which is the most common area). This is made with the Azure QnA framework, so I'm not sure how much I can really edit..
Is there any way that I can access the code so that I can minimize the chat bot or add a button?
I will show a photo to make things more clear: minimizing image
The webchat interface that you are using is coming from Microsoft GitHub's project named BotFramework-WebChat available here.
If you look at the documentation provided on GitHub's main page, you will see that you have several ways of implementing your webchat on your website, from the easiest iframe inclusion to more detailed solutions.
If you want to customize your interface, I would suggest an implementation like the following in your hosting page code:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
</head>
<body>
<div id="bot"/>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<script>
BotChat.App({
directLine: { secret: direct_line_secret },
user: { id: 'userid' },
bot: { id: 'botid' },
resize: 'detect'
}, document.getElementById("bot"));
</script>
</body>
</html>
Here you are declaring the chat and using js and css files from the CDN.
All the code for the webchat component is in the js, so you should get it, make your customization and host it on your side to have what you want.
From the CDN it is minified, but you can rebuild the file using the process described here: https://github.com/Microsoft/BotFramework-WebChat#building-web-chat
For example an interface that we made from those sources:
For this example, we have customized the header in js to :
add 1 button to maximize
add 1 button to close
Then the image of the buttons is made with CSS
When I try to login on sharepoint360 online site using JMeter, it gives JavaScript required to sign in error in response. I got below code in response.
<html>
<head>
<noscript>JavaScript required to sign in</noscript>
<title>Continue</title>
<script type="text/javascript">
function OnBack() {}
function DoSubmit() {
var subt = false;
if (!subt) {
subt = true;
document.fmHF.submit();
}
}
</script>
</head>
<body onload="javascript:DoSubmit();">
<form name="fmHF" id="fmHF" action="https://ApplicationURL.sharepoint.com/_forms/default.aspx?apr=1&wa=wsignin1.0" method="post" target="_self">
<input type="hidden" name="t" id="t" value="EgBZAgMAAAAEgAAAAwABJaEZDRmSdbQKqL6rJyYKAN1Z0valM74LOhnXMHkbILiqeyEyWkHmbZ3hVG8XvpXOVLvlnylOzhJx8KQgSsuO0d6P2quRRU168QMumuqH/qvLVkpZ5mPiBDDyI8l1z+E4++pxZ3H37uIevfjckj40rTlGYJ85aT0/nxcqDxlL6pxKStDm9GKNI81ypsDKv7dMEqg9lRDjJO5qmNEDiCP8jPB3WWke5pVqcn6c1MbnbHzKU2uHzekZqjxAflfvWu5LS9R+N6jciFZvicn8P0EV0LZHqmjXgUsoVMdn9gGemJYnQCoIbkk7Oo9DPaqXRsxApY5sqCwotEJvZ45AaBNAQkgBYABIAQAAAxBYNSeVFbxuVhW8blZOoQcACgAgAAAhAGtrQHNmd3Byb2R1Y3RkZXYub25taWNyb3NvZnQuY29tAGMAAC1rayVzZndwcm9kdWN0ZGV2Lm9ubWljcm9zb2Z0LmNvbUBwYXNzcG9ydC5jb20AAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAB0t1bGRlZXAABUt1bWFyAAAAACAAAAAAAAAAAAD//////////wAAFbxuVpUsb1YAAAAAAAAAAAAAAAANADEyMy42My42NS42NgAAAAAAAAAAAAAAAAAAAQAAAQAAAQAAAQAAAADU1N9WAQAAAQAAAAAAAAAAAAAAAAAANwBodHRwczovL3BvcnRhbC5taWNyb3NvZnRvbmxpbmUuY29tL0NoYW5nZVBhc3N3b3JkLmFzcHgA/////wAAAAAAAA==">
</form>
</body>
Thanks in advance.
Sunil
As per Apache JMeter Homepage
JMeter does not perform all the actions supported by browsers. In particular, JMeter does not execute the Javascript found in HTML pages. Nor does it render the HTML pages as a browser does
You need to extract the "value" attribute of that "t" hidden input and pass it along with other request parameters. I would recommend using CSS/JQuery Extractor or XPath Extractor for this.
Relevant configurations:
CSS/JQuery Extractor
Reference Name: anything meaningful, i.e. t
CSS/JQuery Expression: input[id=t]
Attribute: value
XPath Extractor
Use Tidy - check. If response is XHTML compliant it is not required however.
Reference Name: again, any JMeter Variable name, i.e. t
XPath Expression: //input[#id='t']/#value
Refer the extracted value as ${t} where required
Handle any other dynamic parameters similarly and you should be good to go. JMeter doesn't execute JavaScript but it can capture and execute JavaScript-driven HTTP requests. Given you perform load testing you shouldn't worry about what is happened in browser as JavaScript is being executed on client side only. See ASP.NET Login Testing with JMeter article for more detailed explanation and instructions.
Looking at how sharepoint authentication works, I believe you need to implement authentication using HTTP Request, instead of using login page, as explained here. Basically you will need 2 HTTP requests: first to extract the SAML token, and second to receive authentication cookies, which you can then use in the following HTTP requests, as you normally do.