Inserting HTML into XML view with captcha

Question

I'm currently working on a page that is made with openui5, what I need to do is to insert a captcha, but as far as I know there is no captcha in openui5, what I was trying is to insert HTML content into this.

The problem is, my views are in XML and I did try to insert directly using tags and changing the content, but wasn't possible, it says incorrect xml parsing.

Part of my code of where I want to input my html div:

<Page id="page1" class="marginBoxContent" showHeader="false" showFooter="false" enableScrolling="true">
<content>
  <Image src="../../image/logo.svg" />
  <l:Grid
    defaultSpan="L12 M12 S12"
    width="100%">
    <l:content>
      <f:Form id="FormChange354"
        minWidth="1024"
        maxContainerCols="2"
        editable="true">
        <f:layout>
          <f:ResponsiveGridLayout
            labelSpanL="3"
            labelSpanM="3"
            emptySpanL="4"
            emptySpanM="4"
            columnsL="1"
            columnsM="1" />
        </f:layout>
        <f:formContainers>
          <f:FormContainer>
            <f:formElements>
              <f:FormElement label="{i18n>Language}">
                <f:fields>
                  <Select id="animationSelect" selectedKey="en" change="languageChange">
                      <core:Item text="English" key="en" />
                    <core:Item text="Português" key="pt" />
                      <core:Item text="Español" key="es" />
                      <layoutData>
                        <FlexItemData growFactor="1" />
                      </layoutData>
                    </Select>
                </f:fields>
              </f:FormElement>
            </f:formElements>
            <f:formElements>
              <f:FormElement label="{i18n>User}">
                <f:fields>
                  <Input id="username" value="" type="Email" />
                </f:fields>
              </f:FormElement>
            </f:formElements>
            <f:formElements>
              <f:FormElement label="{i18n>Password}">
                <f:fields>
                  <Input id="password" type="Password" placeholder="" value="" />
                </f:fields>
              </f:FormElement>
            </f:formElements>
            <f:formElements>
              <f:FormElement label="">
                <f:fields>
                  <Button id="btnLogin" text="{i18n>Sigin}" type="Emphasized" press="login" />
                </f:fields>
              </f:FormElement>
            </f:formElements>
          </f:FormContainer>
        </f:formContainers>
      </f:Form>
      <l:VerticalLayout>
          <Link text="{i18n>CreateUser}" press="navCreateUser" />
          <Link text="{i18n>RecoverPass}" press="navRecoverPass" />
          <Link text="{i18n>ChangePass}" press="navChangePass" />
      </l:VerticalLayout>
    </l:content>
  </l:Grid>
</content>

I want to insert exaclty here:

<f:formElements>
          <f:FormElement label="">
            <f:fields>
              <Button id="btnLogin" text="{i18n>Sigin}" type="Emphasized" press="login" />
            </f:fields>
          </f:FormElement>
        </f:formElements>

Inside the fields xml or before, because the captcha will appear above the login button.

The content of the div I want to insert is from google captcha:

<div id='recaptcha' class="g-recaptcha"
      data-sitekey="your_site_key"
      data-callback="onSubmit"
      data-size="invisible"></div>

Couldn't have success yet, anybody can help me with that? Maybe is something about the namespace, I don't know, here is my namespace config:

  <mvc:View
  height="100%"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:l="sap.ui.layout"
  xmlns:f="sap.ui.layout.form"
  xmlns:core="sap.ui.core"
  controllerName="hiddenName.app.login.view.Login">

Thanks a lot for your time!

read the documentation openui5.hana.ondemand.com/#/topic/… — Andrii Naumovych
Probably you should implement your own custom control and there you would implement a renderer which can generate any HTML you want. Refer to sapui5.netweaver.ondemand.com/#/topic/… — slkorolev

Matheus Bica Matheus Bica · Accepted Answer · 2017-09-10T22:22:47

thank you for every help. I got some help from all comments, what I did was declare the namespace to html:

<mvc:View
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:l="sap.ui.layout"
  xmlns:f="sap.ui.layout.form"
  xmlns:core="sap.ui.core"
  xmlns:html="http://www.w3.org/1999/xhtml"
  height="100%"
  controllerName="hiddenName.app.login.view.Login"
>

And simply added the tag as I show down here:

<html:div id="recaptchaGoogle" class="g-recaptcha" data-sitekey="yourKey"></html:div>

Also remember to declare the import of the google js(added it on my index):

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

I'm still trying to figure out how to get this captcha answer and pass or not to the login.

With that, the captcha appears and is generated.

Thank you!

Inserting HTML into XML view with captcha

2 Answers