I am trying to make an OTP service for login and registration. So I made a module for otp service that is working fine. But here for UI, I made and template that should be called inside the login page to visible the otp box and otp send button. Please see samplae code bellow:
<templates xml:space="preserve">
<div name="otp_service" t-name="bulk_sms_otp_service.otp_service">
<h1>Hello world</h1>
</div>
</templates>
Now I am trying to call this template inside login view. Please see bellow:
<odoo>
<template id="custom_login" name="Custom login" inherit_id="web.login">
<xpath expr="//p[hasclass('alert-success')]" position="after">
<t t-call="bulk_sms_otp_service.otp_service"/>
</xpath>
</template>
</odoo>
But this call not working. Giving me an error like:
External id "bulk_sms_otp_service.otp_service" not found
I don't know what's wrong with my code or I am wrong. Please Help me to solve this issue.
You can read at Helpers:
in which case templates stored in the database (as views)
You can deduct that some qweb templates are not stored in database.
You can also read in the JS QWeb Template Engine documentation that templates defined in files listed in the qweb entry in each module manifest are loaded when the web client starts.
When odoo process custom_login template it will try to retrive the bulk_sms_otp_service.otp_service template view_id (From ir.model.data) to read the corresponding template and it will fail because custom_login templates is not stored in database (In ir.ui.view).
Related
We are intergrating an external JavaScript application into Acumatica and we have a need to be able to access the logged in users authorization / user access roles. Our thought is that if we can write the logged in users access roles to the page source as global scope variables our JavaScript app can handle the rest, but we are a bit challenged in figuring out how to do that. We know we can write the roles to the trace screen, but that doesn't help as we need it literally in the page source for this to work (ideally the page source and not the DOM - but we can look into if the DOM could work too).
Any help would be much appreciated.
The page source in ASP.Net is a ASPX.CS file that resides on the server, I doubt your JavaScript can hook into that. The communication from the server to the UI layer is a template engine.
You define the fields in the ASPX file and these template fields are populated with the DataViews current record. The minified JavaScript that is in the page runs that templating engine.
You can't simply generate dynamic HTML or access the JavaScript side of things from the server. So having fields values in the DOM is probably your best bet. You can make the controls invisible if required.
Example to read UI control values using JavaScript:
<%# MasterType VirtualPath="~/MasterPages/FormDetail.master" %>
<asp:content id="cont1" contentplaceholderid="phDS" runat="Server">
<script language="javascript" type="text/javascript">
window.addEventListener('load', function () {
// Fetch a value from UI control
var control = px_alls["edControlID"];
var value = control.getValue();
});
</script>
[...]
</asp:content>
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 am creating a node.js web application where I am using Yeoman angular scaffolding for client side.
I have an index.html which has all the javascript files included to load.
What i want to do is have a header file that will contain users name using model binding. These need to be included in all pages.
How can i achieve this?
You need to use ng-include directive to include partials.
Your index page would be structure something like
<body>
<div id='header' ng-include='/partials/header'/>
<div ng-view />
</body>
I am using a third party to process transactions. They have an api that says XML content should submitted via an HTTP POST variable named “XML”.
I know how to create the xml, but not sure how to post it to their site. They have a destination url. Can you tell me how to do the Post to their site?
You need to carefully check. Usually you just post XML to an URL. However in this case (indicated by the variable name) it seems that a (typically only used for html forms) form post is needed.
The easiest way is to create a html form with that one field, something like this:
<form method="post" action="http://their url" name="payload">
<input type="hidden" id="XML" name="XML" />
</form>
Then you can fill the field with your XML and do a payload.submit()
Let us know how it goes
I'd like to have a partial come from a service via a url like so (using ejs):
<div>
<%- remotePartial('http://google.com/?q=hi') %>
</div>
Is this possible?
You would need to define a dynamicHelper, that fetches the remote template and passes it to the templating engine.
However, this would require asynchronous dynamicHelpers, which are currently not provided. See this thread on the express user group.