1 2 Previous Next 18 Replies Latest reply on Sep 17, 2019 4:14 AM by Ora_Learner890

    Apex 19.1: Tree Region - need how to's....

    Ora_Learner890

      hi all,

       

      We had a Tree Region on Global page ( Page 0 ), it has a Tree style menu on Left Column, will display on all Pages in this Application,  want to know about How To:

       

      1) change color of this specific region

      2) maintain expansion state of Tree ( when user Click on a Node to execute/show a data entry Form or a Report it should remember the Node until Logout )

      3) when login again or someone else logged in then Tree state should be Collapse All

      4) dynamically change icons with colors ( using Font Apex )

       

      Please help us with some links to step by step approach guide.

       

      regards

       

      EDIT: I followed this page ( Maintaining APEX Tree Region Expansion State: UPDATED! | DougGault.com  )  to maintain expansion state, its working fine but on re-login it is not in Collapse All mode ( on same expansion state when user logout and re-login )

       

      Apex_MyTree.jpg

       

      Sorry, forgot to give link:

      https://apex.oracle.com/pls/apex/f?p=4000:1:110961248846069::

       

      oraws890

      ORADEV

      oradev123

       

      application id: 131271 - MyTree

        • 1. Re: Apex 19.1: Tree Region - need how to's....
          fac586

          Ora_Learner890 wrote:

           

          We had a Tree Region on Global page ( Page 0 ), it has a Tree style menu on Left Column, will display on all Pages in this Application, want to know about How To:

           

          1) change color of this specific region

          2) maintain expansion state of Tree ( when user Click on a Node to execute/show a data entry Form or a Report it should remember the Node until Logout )

          3) when login again or someone else logged in then Tree state should be Collapse All

          4) dynamically change icons with colors ( using Font Apex )

          What do you mean by "dynamically change icons with colors"? What icons are you referring to? No icons currently appear in the tree. What colours are to be used? How are they to be "dynamically" determined?

          Please help us with some links to step by step approach guide.

           

          EDIT: I followed this page ( Maintaining APEX Tree Region Expansion State: UPDATED! | DougGault.com ) to maintain expansion state, its working fine but on re-login it is not in Collapse All mode ( on same expansion state when user logout and re-login )

          Help us to help you. There is no sign of any attempt to implement this approach to maintaining tree expansion state in your application. It's great to have a demo to work with, but please ensure that it is doing what you say it is.

          • 2. Re: Apex 19.1: Tree Region - need how to's....
            Ora_Learner890

            thanks fac586

            i want to use Font Apex icons and colors

            dynamically means when user Click on a node when it expand this should change from like say: fa-folder  u-color-1-Text ->  fa-folder-open u-color-2-Text and vice versa.

            for this purpose i followed link below:

            https://eocoe.blogspot.com/2016/09/using-font-awesome-icons-in-apex-5-tree.html

             

            today I modified app to have it on initial state that's why you didn't find the changes I made yesterday and shared the link here which you are referring, sorry but then I made another one from scratch, you can see it ( named: TestTree - 1898 )

             

            hope this clear

            • 3. Re: Apex 19.1: Tree Region - need how to's....
              fac586

              Ora_Learner890 wrote:

               

              thanks fac586

              i want to use Font Apex icons and colors

              dynamically means when user Click on a node when it expand this should change from like say: fa-folder u-color-1-Text -> fa-folder-open u-color-2-Text and vice versa.

              for this purpose i followed link below:

              https://eocoe.blogspot.com/2016/09/using-font-awesome-icons-in-apex-5-tree.html

               

              today I modified app to have it on initial state that's why you didn't find the changes I made yesterday and shared the link here which you are referring, sorry but then I made another one from scratch, you can see it ( named: TestTree - 1898 )

               

              hope this clear

              Unfortunately not. That app doesn't have any tree at all!

              • 4. Re: Apex 19.1: Tree Region - need how to's....
                Ora_Learner890

                I think i messed up these things, I didn't ask to modify app TestTree, just to inform because I knew it that you or any other will go and check MyTree 131271 and where needs, will modify for me. that's why I created TestTree app for my own play around.

                I really apologize for these misunderstandings because of my fault.

                regards

                 

                Note: when going to modify a page, it is not showing Property Editor - how this will appear?

                • 5. Re: Apex 19.1: Tree Region - need how to's....
                  fac586

                  Ora_Learner890 wrote:

                   

                  I think i messed up these things, I didn't ask to modify app TestTree, just to inform because I knew it that you or any other will go and check MyTree 131271 and where needs, will modify for me. that's why I created TestTree app for my own play around.

                  I really apologize for these misunderstandings because of my fault.

                  I will work on a copy of whatever app is required, but it needs to accurately reflect the problem stated in the OP, including whatever it is you are using to persist the tree expansion state.

                  Note: when going to modify a page, it is not showing Property Editor - how this will appear?

                  Don't understand. What is the problem?

                  • 6. Re: Apex 19.1: Tree Region - need how to's....
                    Ora_Learner890

                    thanks for your passions, here is i am trying to explain things:

                     

                    - background color of Tree region

                    - initially this will show 'fa-folder' on item_type in (MENU or SUB-MENU) and 'fa-minus' on item_type = ITEM

                    - when user click on a MENU or SUB-MENU this will expand and icon should be 'fa-folder-open'

                    - when user click again on a MENU or SUB-MENU to Collapse, its icon should be 'fa-folder'

                    - retain expansion state, if user Click on a Node like: 'Cone Entry' (on screenshot in OP) currently this showing entry Form and Collapse the tree but I want it to remember its current state (remain same as in screenshot in OP) and when user logout and re-login then it should be in Collapse All mode ( show only ICPL ERP the very first entry ).

                     

                    hope this will clear.

                    regards

                     

                    Note: there was confusion for Property Editor, its working fine

                    • 7. Re: Apex 19.1: Tree Region - need how to's....
                      fac586

                      Ora_Learner890 wrote:

                       

                      thanks for your passions, here is i am trying to explain things:

                       

                      - background color of Tree region

                      - initially this will show 'fa-folder' on item_type in (MENU or SUB-MENU) and 'fa-minus' on item_type = ITEM

                      - when user click on a MENU or SUB-MENU this will expand and icon should be 'fa-folder-open'

                      - when user click again on a MENU or SUB-MENU to Collapse, its icon should be 'fa-folder'

                      - retain expansion state, if user Click on a Node like: 'Cone Entry' (on screenshot in OP) currently this showing entry Form and Collapse the tree but I want it to remember its current state (remain same as in screenshot in OP) and when user logout and re-login then it should be in Collapse All mode ( show only ICPL ERP the very first entry ).

                       

                      hope this will clear.

                      That's clear enough, but where is this:

                      EDIT: I followed this page ( Maintaining APEX Tree Region Expansion State: UPDATED! | DougGault.com  )  to maintain expansion state, its working fine but on re-login it is not in Collapse All mode ( on same expansion state when user logout and re-login )

                      I need to see exactly what you have done...

                      • 8. Re: Apex 19.1: Tree Region - need how to's....
                        Ora_Learner890

                        as mentioned earlier, I modified and removed because of some problems, I will include and inform then you can check it.

                        regards

                        • 9. Re: Apex 19.1: Tree Region - need how to's....
                          Ora_Learner890

                          its done now you can check.  Application ID: 135836  MyTree

                           

                          here i am facing problem in my internet connection, its taking much time in page loading, so, please understand if any delay in reply.

                          regards

                          • 10. Re: Apex 19.1: Tree Region - need how to's....
                            fac586

                            Ora_Learner890 wrote:

                             

                            here is i am trying to explain things:

                             

                            - background color of Tree region

                            This is controlled declaratively using the Containers > Left Side Column settings in the Theme Roller. However there is a theme bug that is preventing trees from working properly with this, so an extra override rule is also required in the Custom CSS section:

                             

                            /*
                              Fix tree background color bug.
                            */
                            .t-Region .a-TreeView-node--topLevel .a-TreeView-row.is-current--top, 
                            .t-Region .a-TreeView-node--topLevel.is-collapsible>.a-TreeView-row, 
                            .t-Region .a-TreeView-node--topLevel ul { 
                              background-color: unset;
                            }
                            

                             

                            - initially this will show 'fa-folder' on item_type in (MENU or SUB-MENU) and 'fa-minus' on item_type = ITEM

                            - when user click on a MENU or SUB-MENU this will expand and icon should be 'fa-folder-open'

                            - when user click again on a MENU or SUB-MENU to Collapse, its icon should be 'fa-folder'

                            The easiest way to do this is using CSS, setting the icons based on existing classes that indicate whether the node is expanded or collapsed. Again this is added to the Custom CSS section of the Theme Roller:

                             

                            /*
                              Add dynamic contextual icons using CSS.
                            */
                            /*
                              Collapsed node
                            */
                            #MyTree .a-TreeView-node.is-expandable>.a-TreeView-content .fa:before {
                              content: "\f114";
                            }
                            /*
                              Expanded node
                            */
                            #MyTree .a-TreeView-node.is-collapsible>.a-TreeView-content .fa:before {
                              content: "\f115";
                            }
                            /*
                              Leaf node
                            */
                            #MyTree .a-TreeView-node .a-TreeView-node--leaf .fa:before {
                              content: "\f068";
                            }
                            

                             

                            - retain expansion state, if user Click on a Node like: 'Cone Entry' (on screenshot in OP) currently this showing entry Form and Collapse the tree but I want it to remember its current state (remain same as in screenshot in OP) and when user logout and re-login then it should be in Collapse All mode ( show only ICPL ERP the very first entry ).

                             

                            Have you read the documentation for the apex.storage namespace?

                            Both local storage and session storage use the same API to set, get, and remove name value pairs. The difference is that session storage goes away when the browser session ends and local storage is available even when the browser restarts. Keep in mind that the browser is free to limit or delete data stored in local storage at the user's request. Unlike data stored on the server local storage is not shared between browsers on different machines or even different browsers on the same machine.

                             

                            Because APEX supports multiple applications, multiple workspaces and even instances of the same application running in multiple workspaces there can arise conflicts with using web storage because all the apps from a single APEX instance (which is a single origin or web site) share the same web storage space. The apex.storage.getScopedLocalStorage and apex.storage.getScopedSessionStorage solve this problem by partitioning the storage into a scope based on application id and optionally additional information such as page id and region id. The scope is created by using a prefix on all the storage keys. This avoids conflicts when different apps or different instances of the same app use the same keys but it is not a secure partition. Consider this carefully before storing sensitive information in web storage.

                            That makes it clear that the "session" referred to in the apex.storage.getScopedSessionStorage method used in Doug's solution is a browser session, not an APEX session. The persisted tree state will therefore be removed when the user closes their browser, but not when they log out of the application. We can however achieve that through adding another level of partitioning to the storage keys by using the APEX session ID as the optional prefix parameter in the apex.storage.getScopedSessionStorage API calls:

                             

                            Dynamic Action

                             

                            var ids = apex.region("MyTree").call("getExpandedNodeIds").join(":");
                            apex.storage.getScopedSessionStorage({prefix: $v("pInstance"), useAppId: true, usePageId: false}).setItem("treeExpansionState", ids);
                            

                             

                             

                            Tree Initialization Code

                             

                            function(options) {
                              options.makeNodeAdapter = function(data, types, hasIdentity) {
                                var a, 
                                    ids = apex.storage.getScopedSessionStorage({prefix: $v("pInstance"), useAppId: true, usePageId: false}).getItem("treeExpansionState");
                                if ( ids ) {
                                  ids = ids.split(":");
                                }
                                a = $.apex.treeView.makeDefaultNodeAdapter( data, types, hasIdentity, ids );
                                return a;
                              }
                            return options;
                            }
                            

                             

                            See demonstration of all this in application 101898 in your workspace.

                            1 person found this helpful
                            • 11. Re: Apex 19.1: Tree Region - need how to's....
                              Ora_Learner890

                              huge thanks for your efforts/struggle to help us, teach us, guide us

                              I saw few moments ago, as I mentioned here were problem in connection. I have just checked the app you have created for me to illustrate and here you have mentioned everything in detail which is highly appreciable.

                              I saw your thread/topic in this forum yesterday regarding background color of Tree region, hope soon the Developers will fix it.

                              I will check all the steps you have mentioned and will read the documentation as preferred, surely this will help a lot to learn.

                              thanks again ... as usual you are helping us.

                              with best regards

                              • 12. Re: Apex 19.1: Tree Region - need how to's....
                                Ora_Learner890

                                hi fac586

                                i want to know about:

                                - where i can find all codes and related info as below "\f115" and others for these icons ( i just know about Font Apex icons and colors )

                                  content: "\f115";

                                 

                                - how i can add colors to these icons

                                regards

                                 

                                Note: if it requires to create a new topic, then please instruct me to do so.

                                • 13. Re: Apex 19.1: Tree Region - need how to's....
                                  Ora_Learner890

                                  hi fac586

                                  now i have play around and added icon color (in application Copyof fac586 - 1898) in custom css of Theme Roller.

                                  still remaining part is the code for content ( \f115 and others.... ) where i can have all codes to present different icons as per requirements?

                                   

                                  regards

                                  • 14. Re: Apex 19.1: Tree Region - need how to's....
                                    fac586

                                    Ora_Learner890 wrote:

                                     

                                     

                                    i want to know about:

                                    - where i can find all codes and related info as below "\f115" and others for these icons ( i just know about Font Apex icons and colors )

                                    content: "\f115";

                                    Icon systems like Font APEX and Font Awesome are implemented using CSS. The icons are displayed by a rule that uses the content property to generate a string containing a character from the icon font. Each icon is specified using the escape sequence of a Unicode code point in a private use area.

                                     

                                    The relationship between icon classes and the icon code points can be seen by inspecting the relevant style sheet, such as that for Font APEX 2.1 (https://static.oracle.com/cdn/apex/19.1.0.00.15/libraries/font-apex/2.1/css/font-apex.min.css?v=19.1.0.00.15):

                                     

                                    ...
                                    .fa-shopping-cart:before {
                                        content: "\f07a"
                                    }
                                    .fa-folder:before {
                                        content: "\f07b"
                                    }
                                    .fa-folder-open:before {
                                        content: "\f07c"
                                    }
                                    .fa-arrows-v:before {
                                        content: "\f07d"
                                    }
                                    ...
                                    

                                     

                                    - how i can add colors to these icons

                                    Add color properties to the CSS rules:

                                     

                                    /*
                                      Add dynamic contextual icons using CSS.
                                    */
                                    
                                    /*
                                      Collapsed node
                                    */
                                    #MyTree .a-TreeView-node.is-expandable>.a-TreeView-content .fa:before {
                                      content: "\f07b";
                                      color: #d9b13b;
                                    }
                                    /*
                                      Expanded node
                                    */
                                    #MyTree .a-TreeView-node.is-collapsible>.a-TreeView-content .fa:before {
                                      content: "\f07c";
                                      color: #d9b13b;
                                    }
                                    

                                     

                                    See example on page 2 of the demo app where I have used this as an override to the theme style. I don't think that the difference between the solid versions of the open and closed folder icons is clear enough when used in this way. The outline folder icons are both clearer and more flexible because of the much larger number of variants provided.

                                    1 2 Previous Next