If you have questions or if you want to share your opinion about Aware IM post your message on this forum
#49012 by BenHayat
Wed Oct 24, 2018 1:41 am
Guys, have you built any forms or main layout using the new custom HTML forms? If yes, can you share a few screen shots? Preferably if it shows data as well.

Secondly, is it possible to use Bootstrap 4 and it's flexbox layout to build device responsive forms?

Thanks.
#50321 by T0M
Sat Feb 09, 2019 11:42 pm
I'm getting into custom forms and pages within main frames and menus in the next days.

Got a custom login form for admin and users.

It was almost easy (when looking back);
just replace the native one with yours but name it the same, place all resources (css, .js etc) in the same folder (just beside the form).. then you will need know/find out which "aw-mapped" fields from the original native form you need to change/add on your custom one. All set.

Took me a bit to fiddle and sort that out.


Next we got a guest registration form (bound to guest reg process with some other specific checkings - like affiliate IDs)

It was done (I'm on 8.2) with "import HTML" inside form editor.

I almost pulled my hair out and wanted to throw that @#€#&! PC out of the window.. as I couldn't get it working. Always a small thing missing ..

In the end it was quite a simple fix:
the custom form template's html file referenced to something like:
/assets/css/file.css

It works fine when changed into (before importing!):
../assets/css/file.css
OR
../yourcustomfolder/assets/CSS/file.css

:roll: :mrgreen:


I now have a login and "special" registration page greeting me with custom bg image, HTML, CSS and .js ..just like this one (wait, I believe it actually is exactly this one):

https://colorlib.com/wp/template/login-form-v3/




So I just hope that same trick will do well with custom pages and frames.
#50323 by T0M
Sun Feb 10, 2019 4:20 pm
Well.. i tried and failed. Or let´s say i need to continue failing till it finally works. :x


I went per documentation and
-> created a new folder C:/xxx/webapps/myappname/Custom/myfolderforthisshit/product-description
-> put a single html file in /product-description
-> placed all related folders in "product-description" too. Like folder for: css, js, bootstrap (3.xx)..
-> Main frame. Property: Contents: Display HTML page. Imported from /product-description


It shows text content of that html file.. but loading bar is permanently "loading" and the sites menu (native aware) is totally crippled horizontally to the very top of the page (instead of the native vertical menu).
No images are shown. No css styling visible. So i guess .js is also not working.

Then (always did import again and tested):

:arrow: Tried without renaming the ressources paths in pagename.html (they are like: /css/file.css)

:arrow: Tried with renaming the ressources paths in pagename.html to ../css/file.css

:arrow: Tried with renaming the ressources paths in pagename.html to ../Custom/myfolderforthisshit/product-description/css/file.css

:arrow: Tried removing <head> tags. Leaving only the tag and whats inside of <body> </body>

:arrow: Tried removing <head> and <body> leaving only the divs

:arrow: Tried a few more combinations i can´t remember.


If you put in a plain pagename.html without any ressources / links to css, js ..it works as expected.
So something may conflicts with awareim bootstrap, css, js




Anyone has a pointer into the right direction?
(Would love to preserve my brown hair till ma 40's)





Edit/Update:

When using for example:
https://bootsnipp.com/builder
and downloading that vanilla example "Project Name" "Jumbotron" thing.. it kinda works (downloads only a single html file which i then imported as described above)

Edit/Update 2:
Still using bootsnip.com/builder.
When copy/pasting bootsnip HTML code right into Contents -> HTML string. WORKS!
Used bootstrap 3.3.0 and jquery 1.11.1 as ettings as this is at least = or < than aware. (so I'm counting on backward compatibility)
#50325 by aware_support
Sun Feb 10, 2019 9:56 pm
One "gotcha" for those using custom forms (I thought it was documented, but now I cannot find where).

If a form refers to resources stored under the web application directory (AwareIM/Tomcat/webapps/AwareIM) they need to be referred to using ../

Let's say that you store some CSS inside AwareIM/Tomcat/webapps/AwareIM/MyCSS folder

So the form includes a reference like this:
<link href="MyCSS/Somefile.css>>

This works when you just display the form. However, when you import such a form into Aware IM you need to replace the above reference with:
<link href="../MyCSS/Somefile.css>>

This only applies to resources stored inside a web application directory. If your references include absolute URL's they need not be changed.
#50334 by T0M
Mon Feb 11, 2019 10:52 pm
Ok, that's good information.

If a form or page is stored inside awareim we'd need to reference with:
../folder/file.css

But do we also need to define the depth (or aware will look through for this folder itself)?
means like eg:
../../../folder/file.css
#50338 by T0M
Tue Feb 12, 2019 10:00 am
Well, sorry for picking that up again..

But it seems whatever i do.. it will not work.

I put the html and ressources inside aware and outside and tried all options;
Edited ressources to
../folder/
../../folder/ and also left default
folder/

tried to "import" and "display HTML string"

The page itself, if opened on a browser displays fine..
But whenever awareim should serve/display the page it will not work.

Image

Image

Image

Image
#50339 by aware_support
Tue Feb 12, 2019 11:12 am
Custom HTML forms work in object forms only and have nothing to do with visual perspectives. Visual perspectives are a different story altogether - they are imported as is and do not use IFRAME. Also note that they are embedded into an existing Aware IM page - so do not use <link>, <body> or <style> elements. They may or may not work. If you need to include CSS styles put them in the Custom/CSS directory as usual or modify startup.html

Who is online

Users browsing this forum: No registered users and 17 guests