Announcement

Collapse
No announcement yet.

Showing Header Conditionally

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Showing Header Conditionally

    How can I display header conditionally ?

    example pseudocode would look like this

    HTML Code:
    IF Var1=0
    showImage1
    ELSEIF Var1=1
    showimage2
    ENDIF
    Arthur

    -----------------------------------------
    Arthur Klisiewicz
    dATA POINT SOFTWARE
    www.datapointsoftware.com

  • #2
    It might need coding server-side and client-side.
    Inside scriptcase it will depends if your element is created by scriptcase or if it is a custom element you wrote in the code / form / grid / etc.


    Example 1 :
    At server-side, when php process the app you are calling you can just check the value on php and dynamically write the html code.
    Code:
    echo {$var} == x ? '<img href="blablabla" />' : '';
    Use the ternary operator if you have only two options OR a switch case if you have multiple options to check
    Code:
     switch($var) 
    {
        case 'x': echo 'htm code 1 here'; break;
        case 'y': echo 'htm code 2 here'; break;
    /*... it keeps going */
    }

    This example is different from the first, in this one, the element will always be present on the page, and you will be able to hide / show at your whim.
    Example 2:
    You use php to dynamically write at the style of the element to hide or show the field at the moment php is processing the page.
    To show / hide your element you'll need a javascript function that will call the divs id "custom_div_id" and apply the effect to show or hide it.
    Code:
     ?>
    <div id="custom_div_id" style="<?=$local_or_global_variable_from_php === 1 ? 'display:none;' : ''?>">     
        <img src="<?=$dynamic_path_to_your_image_folder?>image_test.png"/> 
    </div> 
    <?php 

    For more or better examples you need to clarify what are you trying to achieve.
    Last edited by Cavadinha; 12-18-2015, 05:45 PM.
    Regards,
    Cavadinha

    Development Team
    Netmake - IT Solutions

    Comment


    • #3
      Can you please explain more what you mean by "server side" ? I'm confused where your sever code supposed to go ?
      I also do not know where am I supposed to put SC code ? I do not see any events for headers

      Arthur
      -----------------------------------------
      Arthur Klisiewicz
      dATA POINT SOFTWARE
      www.datapointsoftware.com

      Comment


      • #4
        Arthur-

        Try inserting this in OnApplicationInit:

        if ([var1] == 1) {
        // Hide header
        ?><script type="text/javascript">
        $( document ).ready(function() {
        $("#sc_grid_head").hide();
        });
        </script><?
        }

        This works for a grid, but the selector (#sc_grid_head) may need to be different depending on the application you are using. By inspecting the header, you can find the id reference.

        Cheers,

        Brad

        Comment


        • #5
          Originally posted by aka View Post
          Can you please explain more what you mean by "server side" ? I'm confused where your sever code supposed to go ?
          I also do not know where am I supposed to put SC code ? I do not see any events for headers

          Arthur
          Example 2 goes to the HTML template you set as header. First example is to define the image will be used.
          Could be interesting to know exactly what you try to do. You can define "fields" on your template too, and control from SC UI.
          /Giuseppe

          Professional Scriptcase Services
          Some Customers opinions

          Comment


          • #6
            Originally posted by aka View Post
            Can you please explain more what you mean by "server side" ? I'm confused where your sever code supposed to go ?
            I also do not know where am I supposed to put SC code ? I do not see any events for headers

            In order to get a better help, you need to clarify what are you trying to do.
            Anyway, i'll explain below more less the difference of server-side (back-end) and client-side (front-end) coding.


            Server-side in this case is the PHP language. It will be processed when the page is loading.
            It will be processed by your host (server) and is a "safer" way to do your coding.

            You can code to print something in the screen while testing your variables (anything you set in the session or globals. Data from your database, etc).

            Front-end coding in this case will be javascript.
            It will be processed client-side on the user's browser.

            In general you will use the front-end to manipulate elements while the user is using your page.
            Show / hide some fields.
            Send parameters to the server (some ajax call).
            Drag and drop stuffs.
            Accordion.

            People often use jQuery to help the front-end coding.
            Scriptcase deploys it on the generated apps already.
            Regards,
            Cavadinha

            Development Team
            Netmake - IT Solutions

            Comment


            • #7
              Giu - I would love to see some example how the template variables are handled. Do you have any ?
              Arthur
              -----------------------------------------
              Arthur Klisiewicz
              dATA POINT SOFTWARE
              www.datapointsoftware.com

              Comment


              • #8
                OK, I"m sorry for not being precise enough. As you see my pseudo code in the first post, this is all correct although my intention is to have variable images in the project header (not the App header). Another words I want to change images based on some global variable (no matter what App is opened). So for example if I have a top (vertical) menu I want to be able to call Apps through the menu but independant of the App open modify the TopMenu header with appropriate image. I hope this is clear. I assume that the implementation would be the same.





                bradk - your example
                PHP Code:
                ?><script type="text/javascript"> 


                is very generic. How would I use JS to display image in SC ?

                Arthur
                -----------------------------------------
                Arthur Klisiewicz
                dATA POINT SOFTWARE
                www.datapointsoftware.com

                Comment


                • #9
                  With JS/jQuery/otherlibs you can modify the DOM of the webpage in realtime.

                  I'm not in front of my PC, I speaks from memory.....

                  On a HTML template header, you can have something like
                  <img src={myimage} />, then, on layout, a new param appears for you, wherre you can for example assign to a global [gloImage], for example.
                  In your application init event, you can give value to [gloImage] and template will take it.

                  But.....the problem I see reading you, is thath you want to do it on a menu, but a menu don't refresh when change over it's items.
                  The way you have to go, is using JS to modify it. In you HTML template, create just a <div id=placeformyimage></div> ini your HTML template.

                  Then, onExecute of menu, you can catch wich menu was pressed with sc_menu_item and based on the item, throw a JS call modifiying DOM where you want, something similiar to:

                  sc_ajax_javascript('changeImage()')

                  And on your JS programming, you create a funcion called changeImage with this code

                  Code:
                  var img = new Image();
                  var div = document.getElementById('placeformyimage');
                  
                  img.onload = function() {
                    div.appendChild(img);
                  };
                  
                  img.src = 'path/to/image.jpg';
                  I hope I understood you correctly.
                  /Giuseppe

                  Professional Scriptcase Services
                  Some Customers opinions

                  Comment


                  • #10
                    OK, this was quite constructive post, thanks. Let me chew on it and I will probably get back with some questions.

                    For now the one I have, is about your statement:
                    <img src={myimage} />, then, on layout, a new param appears for you
                    so where actually this appears ?

                    Also - I do not need to change the image based on an item selected but rather based on some global variable. Another words if in "onScriptInit" event I have some code that modifies global Var I want based on the Var modify an image in the header. I'm not really sure if there is any way to make a menu refresh-able (ie. so it updates every few seconds) same way you can do with the grid. If this would be possible then the challenge is resolved.

                    Arthur
                    Last edited by aka; 12-24-2015, 02:10 AM.
                    -----------------------------------------
                    Arthur Klisiewicz
                    dATA POINT SOFTWARE
                    www.datapointsoftware.com

                    Comment


                    • #11
                      If the header space is not an issue and you just want to show\hide an image inside it, can't you use [image_var] inside the header and conditionally populate or reset the [image_var] variable when calling the app or in the app events?

                      Comment


                      • #12
                        aka
                        In this case try to follow Giu's solution.

                        If the image will change based on a php global variable then you just need to put in header the code you quoted and its pretty much it.
                        You just need to add all the extra images you need on the app.
                        Example: Menu > Application > Config

                        You'll be able to add more images for your app here.
                        Regards,
                        Cavadinha

                        Development Team
                        Netmake - IT Solutions

                        Comment


                        • #13
                          Cavadinha - I understand that part. The issue is with the Menu. I do not know how to make a Menu (or rather header) refresh every time the global variable change. Any idea on how to do it ?
                          -----------------------------------------
                          Arthur Klisiewicz
                          dATA POINT SOFTWARE
                          www.datapointsoftware.com

                          Comment


                          • #14
                            Maybe.

                            In advance I can tell you if it is an action via one of the linked apps you got inside your menu, lets say a form or grid.
                            If they are refreshed AND if you could check this same variable on those apps there are linked to the menu, then you could just make a parent call to manipulate the "img" object.

                            What I can say for sure is: It is possible and it probably have multiple ways to be done.

                            But I can't help you any further without specific information.
                            I will try to make a little tutorial that will help a lot of the users and maybe it will help you too.
                            Link: http://www.scriptcase.net/forum/foru...e-clicked-item

                            But remember that there are a lot of consultants here in this forum that might help you, just look for the most active members.
                            Last edited by Cavadinha; 12-28-2015, 04:42 PM. Reason: Added link
                            Regards,
                            Cavadinha

                            Development Team
                            Netmake - IT Solutions

                            Comment


                            • #15
                              Yes, this helps and your tutorial is really great - thanks.

                              My need is a bit different (but close). I saw other members on the forum asking similar question. Often we need to have some indication of something that happens within the project. For example number of certain records in certain table. It could be status of some variable (ie. ON/OFF), could be logged user etc.
                              I managed for example displaying a logged user name but I have a need to display some other data. The problem is that I need the menu header or footer to show the information either when it is changed. Let me give an example here.
                              Say I have a table with the record holding last update date. The column is for example TIMESTAMP type. I want to display the latest date and time when the record was updated and I want menu to check for the update in loop so no clicking is necessary to see the change. Another example might be a variable that shows number of current records in a table. If (using another project or interface) number of records changes the menu would automatically update the variable and refresh it to show current value. As I said earlier this is similar scenario to showing/refreshing a grid but doing this in the menu instead.

                              ARTHUR
                              -----------------------------------------
                              Arthur Klisiewicz
                              dATA POINT SOFTWARE
                              www.datapointsoftware.com

                              Comment

                              Working...
                              X