[Full Screen Ajax Wait] impementation

[Full Screen Ajax Wait] impementation

  
Forge Component
(6)
Published on 19 Jul by Pedro Coelho
6 votes
Published on 19 Jul by Pedro Coelho
 Hi,
    I want to use Full screen Ajax wait in my application and I want to put this on layout page not on every page so when ever ajax request is intialized it will trigger this plugin and display ajax wait .Is it possiple to do that if so how can i do that is there any documentation available for this .Please provide the soluton.
Hi,
its very simple to add full ajax wait in your application, you need to add the reference of this component in you espace and simply need to drag an drop the fullAjaxwait webblock on your page, since you don't want to use it on every page, so don't need to add it on common layout webblock. Simply use it wherever it is required.
The fastest way to achieve what I'm understanding your request is (have this replacer for the AjaxWait in some pages) it's just to create 2 layouts

If you check the espace, you will find a Modified_Layout, you could have the Unmodified_Layout or something and use the appropriate layout in the pages that you require 

The soulition that Manish Jawla posted is not tottally correct, since by default the layouts that the platform use already include the AjaxWait, so it will conflict if you just add the web block to a page that already contains one AjaxWait.

Just add another layout and it will work fine.

Best regards,
PC 
Hi Pedro Coelho,

In my above post i have mentioned the common layout not the default Layout! Usually we use Custom layout for our application not the default layout of Outsystem, if you are developing the application for Clients.
Please read the post carefully before mentioning the comment over it.

Thanks,
MJ

 
Manish Jawla wrote:
Hi Pedro Coelho,

In my above post i have mentioned the common layout not the default Layout! Usually we use Custom layout for our application not the default layout of Outsystem, if you are developing the application for Clients.
Please read the post carefully before mentioning the comment over it.

Thanks,
MJ

 
 It seems you missunderstood what I said.
  1. My solution is have 2 layouts one with the web block and the other without, most likely with the default richwidgets web block
  2. I said that the Plataform's default layouts do have the default richwidgets web block embedded after the footer. If you open a clone of RichWidgets and open one of the layouts there (Layout_London or Layout_Chicago) you will notice that the last web block on either of these layouts it's the "RichWidgets\Feedback_AjaxWait" 
    Having that into consideration your proposed solution to simply add the FullScreen_AjaxWait whenever you needed it to the page will not work because of the conflicts
 Best regards,
PC

Hi guys, please help me on this. I want the loading to be on the center of the screen.


how can I do that?

thanks

-Daryl

just put the loadiing icon inside the div and position it center with css by giving position left top add below style to your div which contains loading icon.

div.classname{text-align:center}

ash vd wrote:

just put the loadiing icon inside the div and position it center with css by giving position left top add below style to your div which contains loading icon.

div.classname{text-align:center}

it didn't work :-(



<div style="margin:auto;text-align:center;width:100%;position:absolute;top:10px;left:50%"><img src="loading.gif"></div>


make the parent div to position relative.

just try this or send me your generated html code 

ash vd wrote:

<div style="margin:auto;text-align:center;width:100%;position:absolute;top:10px;left:50%"><img src="loading.gif"></div>


make the parent div to position relative.

just try this or send me your generated html code 

wel this is the code:


div.Feedback_AjaxWait {
    font-weight:   bold !important;
    position: absolute;
    color: white;
    font-size: 16px;
    position: fixed;
    bottom: 30px !important;
    right: 20px !important;
    background-color: #6698b7 !important;
    padding: 4px 10px 4px 10px;
    z-index: 10000;
    border-top-left-radius: 3px;
}
.Feedback_AjaxWait_CursorProgress,
.Feedback_AjaxWait_CursorProgress a,
.Feedback_AjaxWait_CursorProgress input {
    cursor: progress;
}

the loading icon is still on top.


just remove position fixed  from the style

Guys, the original CSS used for this was back when London Theme was the default for v8/v9 apps (the !important stuff was to overwrite the London stuff)

Using it on other themes, it will most likely need to have some tweaks to the CSS to comply with the new styles

The only thing you should need to replace (as far as the CSS) is:

div.Feedback_AjaxWait {
}

I will try and create a new version for it as soon as I have some time

Best regards,

PC

Pedro Coelho wrote:

Guys, the original CSS used for this was back when London Theme was the default for v8/v9 apps (the !important stuff was to overwrite the London stuff)

Using it on other themes, it will most likely need to have some tweaks to the CSS to comply with the new styles

The only thing you should need to replace (as far as the CSS) is:

div.Feedback_AjaxWait {
}

I will try and create a new version for it as soon as I have some time

Best regards,

PC


Yes true  we need to change the style only it will work as expected now also we can do just need to overwrite the styles.

@DARYLE IF POSSIBLE FOR YOU TO JUST SEND THE GENERATED HTML STRUCTURE JUST THAT  DIV PART WHICH CONTAINS THE LOADING ICON .

A div PAI deve ter display:table

A div FILHO deve ter display:table-cell vertical-align:middle text-align:center

Hi

Above component not working with OS 10 version 10.0.201.0.
Is there any alternative to use this component with above OS version

Hey Salman,

it's working fine with outsystems10 also

just now I have tested it's working fine for me 

https://pankajpant824.outsystemscloud.com/SlikUITemplate/HomePage.aspx

please click on the how it works button in the top right corner.

please find the image for the version  and it's working


Regards

PP

pankaj pant wrote:

Hey Salman,

it's working fine with outsystems10 also

just now I have tested it's working fine for me 

https://pankajpant824.outsystemscloud.com/SlikUITemplate/HomePage.aspx

please click on the how it works button in the top right corner.

please find the image for the version  and it's working


Regards

PP

Dear Pankaj,

Did you check my version  OS 10 version (10.0.201.0).its not working with this version


Hello Salman Ansari

What is "it's not working"?

As you can see by the demo page of the component, it works on P10 (it should work on all versions to be honest), so a bit more information would be useful 

Thank you.

Best regards,

PC

Pedro Coelho wrote:

Hello Salman Ansari

What is "it's not working"?

As you can see by the demo page of the component, it works on P10 (it should work on all versions to be honest), so a bit more information would be useful 

Thank you.

Best regards,

PC


Hi Pedro,

I agree that should work but when I am trying to install it it showing me below error.


Salman Ansari wrote:

Pedro Coelho wrote:

Hello Salman Ansari

What is "it's not working"?

As you can see by the demo page of the component, it works on P10 (it should work on all versions to be honest), so a bit more information would be useful 

Thank you.

Best regards,

PC


Hi Pedro,

I agree that should work but when I am trying to install it it showing me below error.




Salman Ansari wrote:

Pedro Coelho wrote:

Hello Salman Ansari

What is "it's not working"?

As you can see by the demo page of the component, it works on P10 (it should work on all versions to be honest), so a bit more information would be useful 

Thank you.

Best regards,

PC


Hi Pedro,

I agree that should work but when I am trying to install it it showing me below error.



I don't know why you are publishing this component what I have done is just download this component in my environment take the reference of this component in my application call this component in my layout.

and set the text that's it. 

if it is working in PF10 it should work for all the versions.


Regards,

PP



Ok, the component does not have an issue because I just installed it on a new environment and it works fine (you do need to force install it since it's an old version of the platform but it works)

Your issue is with the way you acquired the espace/solution that you are trying to install.

Please download it from this link or use the install option directly within Service Studio:

Best regards,

PC


pankaj pant wrote:

Salman Ansari wrote:

Pedro Coelho wrote:

Hello Salman Ansari

What is "it's not working"?

As you can see by the demo page of the component, it works on P10 (it should work on all versions to be honest), so a bit more information would be useful 

Thank you.

Best regards,

PC


Hi Pedro,

I agree that should work but when I am trying to install it it showing me below error.



I don't know why you are publishing this component what I have done is just download this component in my environment take the reference of this component in my application call this component in my layout.

and set the text that's it. 

if it is working in PF10 it should work for all the versions.


Regards,

PP



Pankaj for your information to take reference of any component it should be available in your environment where OS installed.other then default component,default component already available to use or for take reference but in mine case that is not default component


Pedro Coelho wrote:

Ok, the component does not have an issue because I just installed it on a new environment and it works fine (you do need to force install it since it's an old version of the platform but it works)

Your issue is with the way you acquired the espace/solution that you are trying to install.

Please download it from this link or use the install option directly within Service Studio:

Best regards,

PC


Hi Pedro,

Already tried both way but not succeed.pls see attached.i.e.I don't want to take any risk that warning shown in attached as that will impact other apps.


As I said earlier, you need to force install, since the component was created in an older version of the platform.

After that, you can test it in your environment

Best regards,

PC

Pedro Coelho wrote:

As I said earlier, you need to force install, since the component was created in an older version of the platform.

After that, you can test it in your environment

Best regards,

PC

As I already told you that I don't want to take any risk as that will affect any other apps on this platform.
If this is only the way with high risk then I will not go for it.I will write new component for this purpose.
Thank you so much for your time.


Sorry but I'm not understanding, what is the high risk are you talking about?

If the component is not installed in your environment, there are no dependencies of any application in the infrastructure to the component, meaning the risk is nonexistent...

The force install will upgrade the component to your version of the platform and then will install it, that is what the procedure will do.

As I mentioned before, I did just that in an environment where the component is not installed without a problem

Best regards,

PC

Pedro Coelho wrote:

Sorry but I'm not understanding, what is the high risk are you talking about?

If the component is not installed in your environment, there are no dependencies of any application in the infrastructure to the component, meaning the risk is nonexistent...

The force install will upgrade the component to your version of the platform and then will install it, that is what the procedure will do.

As I mentioned before, I did just that in an environment where the component is not installed without a problem

Best regards,

PC

ok.will try this in other environment with same version.


In the meanwhile, I've added a new version of the component to be fully compliant with the P10 and that can be used in all of the scenarios (using old themes, new themes, no theme, etc.)

Best regards

PC