Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Intraweb Using Template
#1
hi,

I have a template. I want to design a user login page using this template. How to add {%IW..%} to the code block below for Username, Password, Login Button and Forgot password link.

Code:
<html>
  <head>
    <title>DAC Module</title>
    <meta http-equiv="x-ua-compatible" content="IE=Edge"/>
    <meta http-equiv="content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="content-Language" content="Turkish">
    <meta http-equiv="content-Style-Type" content="text/css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="date=no">
    <meta name="format-detection" content="address=no">
    <meta name="format-detection" content="email=no">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
    <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
    <link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
    <link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
  </head>
  <body>
    <div class="limiter">
      <div class="container-login100">
        <div class="wrap-login100 p-t-25 p-b-20">
          <form class="login100-form validate-form">
            <span class="login100-form-title p-b-1">DAC Module</span>
            <div class="wrap-input100 validate-input m-t-25 m-b-35" data-validate = "Enter username">
              <input class="input100" type="text" name="username">
              <span class="focus-input100" data-placeholder="Username"></span>
            </div>
            <div class="wrap-input100 validate-input m-b-50" data-validate="Enter password">
              <input class="input100" type="password" name="pass">
              <span class="focus-input100" data-placeholder="Password"></span>
            </div>
            <div class="container-login100-form-btn">
              <button class="login100-form-btn">Login</button>
            </div>
            <ul class="login-more p-t-100">
              <li class="m-b-8">
                <span class="txt1">Forgot</span>
                <a href="#" class="txt2">Username / Password?</a>
              </li>
            </ul>
          </form>
        </div>
      </div>
    </div>
    <div id="dropDownSelect1"></div>
    <script src="vendor/animsition/js/animsition.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendor/bootstrap/js/popper.js"></script>
    <script src="vendor/countdowntime/countdowntime.js"></script>
    <script src="vendor/daterangepicker/daterangepicker.js"></script>
    <script src="vendor/daterangepicker/moment.min.js"></script>
    <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
    <script src="vendor/select2/select2.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>
Reply
#2
Change the input's, before:
Code:
<input class="input100" type="text" name="username">
after:
Code:
{%IWEdit_Username%}

for buttons, you can add an id="NAMEYOURBUTTON" (in UPPERCASE) :
Code:
<button class="login100-form-btn">Login</button>
to
Code:
<button class="login100-form-btn" id="IWBUTTON_LOGGIN">Login</button>
Reply
#3
hi,
Thank you for answer.
But I couldn't do what you said. I am sharing my original files. Would you like to help?


https://mega.nz/file/no9jwBiQ#K-snmgZNSn...YEWD7GHhzM
Reply
#4
Hi. Of course. Some considerations:
-Templates folder only have your forms.
-Templates folder have to located in the same folder as EXE.
-Create a folder named wwwroot in same folder as EXE.
-Move all folders of your template (css/fonts/js/vendor) inside wwwroot folder.
-In templateprocessor component, set RenderStyles := False;
-In fmUserLogin.html, put your edits and your button, see atached.


Attached Files
.zip   DAC_MODULE_Modified.zip (Size: 62.67 KB / Downloads: 27)
Reply
#5
Thank you so much. Thanks to you, I learned how to do it.
Why is the data in the text box confused in the button click event?

[Image: KAnmgy.jpg]
Reply
#6
I did TemplateProcessorHTML MasterFormTag = False, it was fixed.
Reply
#7
(09-19-2020, 10:31 AM)Okanms Wrote: hi,
Thank you for answer.
But I couldn't do what you said. I am sharing my original files. Would you like to help?


https://mega.nz/file/no9jwBiQ#K-snmgZNSn...YEWD7GHhzM

Jose provided your answers, but I'll offer a tip:  Note that the Template files but only the template files go in the Template directory.  It does good to remember that the templates are not just served up, they are only used to create IWforms.   All other files should go where any other IWform would look for them... which will be based on the wwwroot as "home".

You may have already had your files set up like that but often people try to put dependent files in the same directory as the Template so I leave the comment for others later with similar issues.

(I did not look at your sample to determine this was your trouble, it's just a tip and is based on Jose's comments)

Dan
Reply
#8
(09-20-2020, 12:21 AM)DanBarclay Wrote:
(09-19-2020, 10:31 AM)Okanms Wrote: hi,
Thank you for answer.
But I couldn't do what you said. I am sharing my original files. Would you like to help?


https://mega.nz/file/no9jwBiQ#K-snmgZNSn...YEWD7GHhzM

Jose provided your answers, but I'll offer a tip:  Note that the Template files but only the template files go in the Template directory.  It does good to remember that the templates are not just served up, they are only used to create IWforms.   All other files should go where any other IWform would look for them... which will be based on the wwwroot as "home".

You may have already had your files set up like that but often people try to put dependent files in the same directory as the Template so I leave the comment for others later with similar issues.

(I did not look at your sample to determine this was your trouble, it's just a tip and is based on Jose's comments)

Dan
Thank you so much.

IWEdit1.Required := True;
I want to ask another question with your permission.

Can the warning be disabled for required fields in the IWEdit? I am already showing this warning in the IWEdit.

[Image: o5iA5Z.jpg]
Reply
#9
IWEdit1.Required := True;
I want to ask another question with your permission.

Can the warning be disabled for required fields in the IWEdit? I am already showing this warning in the IWEdit.
Reply
#10
If you are validating it yoruself, just set required to false. Required is just a test for an empty field. If you are testing it, no need to test it again
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)