Making a container control visible or invisible

  1. 3 weeks ago

    Hello Xojoers!

    I have two web pages, in page1 I'm loading a list of customers, in Page2 I load the details of the customer that has been selected in Page1 (the usual stuff ;) ), however I'm having problems attempting to do the following: In Page2 I have two container controls one for each type of customer I'm dealing with (different type of data needs to be displayed depending on the type of customer), both container controls start as .visible = false and I need to make one of them visible depending on the type of customer that was selected in Page1.

    I have tried making the container controls .visible = true by calling from Page1 a method I wrote on Page2 in an attempt to make this work, I have tried making the container control visible in the same method where I'm loading the data from the database and also on the shown event of Page2, so far I have had no success :( .

    Any help is much appreciated

    Hi @HectorMarroquin

    Here you can download a quick example showing how you can achieve that.

    Basically all the code it uses is this:

    Static visible As String = "none"
    ccdemo.ExecuteJavaScript("document.getElementById('"+ccdemo.ControlID+"').style.display='"+visible+"';")
    
    visible = If(visible ="none", "inherit", "none")

    The demo project ContainerControl is named "ccdemo"; so you get the "controlID" and execute a bit of JavaScript on it to change the CSS property in charge of its visibility.

    Hope it helps!

  2. Michel B

    Jan 7 Pre-Release Testers, Xojo Pro

    If you are manipulating visible in the same shown event, it won't work. All you get is the last state in the event.

    You may want to move the part where you make one container visible and the other invisible in a timer Action event.

  3. Thanks for your reply Michael, you have been of great help to me the last couple of weeks, much appreciated. I've read some of your posts in the Spanish and Italian section of the forum (I only read a bit of Italian but I can't speak it to save my life LOL) and I've learned a lot from them.

    I tried using a Timer but I still can't get this thing to work. This is the code I have on the timer:

    Sub Action() Handles Action
      
      if self.contribuyente.tipoContribuyente = "INDIVIDUAL" then
        
        self.contribuyenteIndividualContainer.top = 185
        self.contribuyenteIndividualContainer.Left = 0
        self.contribuyenteIndividualContainer.Visible = true
        
      else
        // empty for the time being 
      end if
      
      me.MsgBox("timer fired!")
    End Sub
    

    I get the alert/messagebox but I'm still not getting the container to show. Also if I step the code I see that it does in fact run the If condition, I just don't get the result I need.

  4. Michel B

    Jan 7 Pre-Release Testers, Xojo Pro

    I don't see why it should not work.

    Perhaps verify the size of the container ?

  5. Michael, I have no clue why it doesn't work either. However I remembered something you wrote to me the other day in response to a similar question I had about a webProgressWheel not showing. You told me to remember that the UI can't be updated on a single event. Then it came to me that I was updating a popup menu that is outside of these container controls and I remembered that the popup fires the SelectionChanged event when it is change by code. I place the code that I posted earlier in this event and it's now working nicely.

    Thanks for your help!

  6. Javier M

    Jan 8 Xojo Inc, Pre-Release Testers, Xojo Pro, XDC Speakers, Third Party Store Answer AprendeXojo - Europe, Spain

    Hi @HectorMarroquin

    Here you can download a quick example showing how you can achieve that.

    Basically all the code it uses is this:

    Static visible As String = "none"
    ccdemo.ExecuteJavaScript("document.getElementById('"+ccdemo.ControlID+"').style.display='"+visible+"';")
    
    visible = If(visible ="none", "inherit", "none")

    The demo project ContainerControl is named "ccdemo"; so you get the "controlID" and execute a bit of JavaScript on it to change the CSS property in charge of its visibility.

    Hope it helps!

  7. Javier M

    Jan 8 Xojo Inc, Pre-Release Testers, Xojo Pro, XDC Speakers, Third Party Store AprendeXojo - Europe, Spain
    Edited 3 weeks ago

    Doing additional tests (Xojo 2019r3):

    — Add a "Visibility" property to WebPage2
    — Add the "Shown" event handler and in its Code Editor: MyContainerControl.Visible = Visibility (change it for the name of the Container you need to change its visibility)
    — On the WebPage1, set the WebPage2.visibility property to the desired value before calling "WebPage2.Show"

    Well… in fact, it also works if you change the container control Visible property when the webpage is already displayed (for example from the Action event of a PushButton). May you give more information about the Xojo release you're using and kind/version of web browser you're testing it on?

    It works fine here.

    Javier

  8. Thank you for your posts Javier! I'll test your idea right away.

    I'm running Xojo 2019R3

    Tested using Chrome Versión 79.0.3945.88 and Firefox 72.0

  9. 2 weeks ago

    Thank you very much Javier! I didn't had a chance to get back at this until today. Got it working following your advice.

or Sign Up to reply!