Dynamic navigation bar

Hello. I am in the process of developing a site that will be
expanded frequently in the future. I would like to have the
navigation bar of every page update when I add new pages. How is
this best done? I am not planning on using a database here so I
want to use straight html.
Thanks, and I hope I made my question clear enough.

A server-side include is another page that is inserted into
your web page.
That way when you make a change to the server-side include,
you would only need to change it, and upload it, and not every page
that
it is included on.
http://en.wikipedia.org/wiki/Server_Side_Includes
Be sure to read the external links for the scripting language
your web host supports.
http://en.wikipedia.org/wiki/Server_Side_Includes#External_links
Ken Ford
Adobe Community Expert
Fordwebs, LLC
http://www.fordwebs.com
"EdwardDarrington" <[email protected]> wrote
in message news:etkrhp$hmn$[email protected]..
> Thanks a lot for the quick answer.
>
> Would you mind expanding on that?

Similar Messages

Tree as Navigation bar

Hi,
I want to have a tree likes this one that appears in the page (choose Folder) when I try to add a new Portlet,to use it as dynamic navigation bar.Can you give me any indications to realize it.
thanks

Yoann,
Have you downloaded and looked at the Fusion Order Demo application (from the JDev 11 home page)? In that application you will find (on the home page) a section called "Browse" that displays a tree of product categories, and when the item is selected from the tree, displays the products for that category.
Is this helpful?
John

How can I use my Html/CSS Navigation bar to control an Edge Stage?

I have an HTML/CSS navigation bar set up in my EDGE created page. The Navbar is not created in edge. I would like to use these buttons to control the stage.
Inside the stage the main timeline has labels and stop actions every 1.5 secs to create a horizontally sliding site.
The labels are as follows: home, work, blog, profile, and contact. I can easily use a symbol created inside edge for example:
sym.play("home");
and animate a 6000px width symbol across my 1000px stage in 1000px increments.
I do not want to use a symbol inside of edge to do this because I cannot create the effect that the html/css navbar has on mouseover inside of edge.
So I am interested in knowing if I can use this bar to control my main timeline so I don't have to sacrifice design for functionality.
currently the link list is setup with the standard hyperlink. What code would I use to play the stage on click of the html navbar?
Many thanks to anyone who can help with this!
Here is the code for the navbar:
<div id="menu"><ul class="block-menu">
                    <li><a href="/home" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>
                    <li><a href="/demos" class="three-d">
                              Work
                              <span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
                    </a></li>
                    <li><a href="/deals" class="three-d">
                              Blog
                              <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
                    </a></li>
                    <li><a href="/about" class="three-d">
                              Profile
                              <span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
                    </a></li>
        <li><a href="/about" class="three-d">
                              Contact
                              <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
                    </a></li>
          </ul>
<span class="block-menu"></span></div>
Full HTML:
<!DOCTYPE html>
<html>
<head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
          <title>Untitled</title>

    <script type="text/javascript" charset="utf-8" src="workapp_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-57204389 { visibility:hidden; }
              .block-menu {
                              display: block;
                              background: #000;
                    .block-menu li {
                              display: inline-block;
                    .block-menu li a {
                              color: #fff;
                              display: block;
                              text-decoration: none;
                              font-family: 'Passion One',Arial,sans-serif;
                              -webkit-font-smoothing: antialiased;
                              -moz-font-smoothing: antialiased;
                              font-smoothing: antialiased;
                              text-transform: uppercase;
                              overflow: visible;
                              line-height: 20px;
                              font-size: 24px;
                              padding: 15px 10px;
                    /* animation domination */
                    .three-d {
                              -webkit-perspective: 200px;
                              -moz-perspective: 200px;
                              perspective: 200px;
                              -webkit-transition: all .07s linear;
                              -moz-transition: all .07s linear;
                              transition: all .07s linear;
                              position: relative;
                              .three-d:not(.active):hover {
                                        cursor: pointer;
                              .three-d:not(.active):hover .three-d-box,
                              .three-d:not(.active):focus .three-d-box {
                                        -moz-transform: translateZ(-25px) rotateX(90deg);
                                        -webkit-transform: translateZ(-25px) rotateX(90deg);
                                        -o-transform: translateZ(-25px) rotateX(90deg);
                                        transform: translateZ(-25px) rotateX(90deg);
                    .three-d-box {
                              -webkit-transition: all .3s ease-out;
                              -moz-transition: all .3s ease-out;
                              -ms-transition: all .3s ease-out;
                              -o-transition: all .3s ease-out;
                              transition: all .3s ease-out;
                              -webkit-transform: translatez(-25px);
                              -moz-transform: translatez(-25px);
                              -o-transform: translatez(-25px);
                              transform: translatez(-25px);
                              -webkit-transform-style: preserve-3d;
                              -moz-transform-style: preserve-3d;
                              -ms-transform-style: preserve-3d;
                              -o-transform-style: preserve-3d;
                              transform-style: preserve-3d;
                              pointer-events: none;
                              position: absolute;
                              top: 0;
                              left: 0;
                              display: block;
                              width: 100%;
                              height: 100%;
                    .front {
                              -webkit-transform: rotatex(0deg) translatez(25px);
                              -moz-transform: rotatex(0deg) translatez(25px);
                              -o-transform: rotatex(0deg) translatez(25px);
                              transform: rotatex(0deg) translatez(25px);
                    .back {
                              -webkit-transform: rotatex(-90deg) translatez(25px);
                              -moz-transform: rotatex(-90deg) translatez(25px);
                              -o-transform: rotatex(-90deg) translatez(25px);
                              transform: rotatex(-90deg) translatez(25px);
                              color: #FFE7C4;
                    .front, .back {
                              display: block;
                              width: 100%;
                              height: 100%;
                              position: absolute;
                              top: 0;
                              left: 0;
                              background: black;
                              padding: 15px 10px;
                              color: white;
                              pointer-events: none;
                              -moz-box-sizing: border-box;
                              box-sizing: border-box;
    </style>

</head>
<body>
<div id="menu"><ul class="block-menu">
                    <li><a href="/home" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>
                    <li><a href="/demos" class="three-d">
                              Work
                              <span class="three-d-box"><span class="front">Work</span><span class="back">Work</span></span>
                    </a></li>
                    <li><a href="/deals" class="three-d">
                              Blog
                              <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span>
                    </a></li>
                    <li><a href="/about" class="three-d">
                              Profile
                              <span class="three-d-box"><span class="front">Profile</span><span class="back">Profile</span></span>
                    </a></li>
        <li><a href="/about" class="three-d">
                              Contact
                              <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span>
                    </a></li>
          </ul>
<span class="block-menu"></span></div>
<div id="Stage" class="EDGE-57204389">
</div>
</body>
</html>

I've come across this from the Edge API:
Edge.getComposition(compId)
Anyone having trouble with this same issue should try this:
var targetComp = AdobeEdge.getComposition('TARGETCOMPID');
   targetComp.getStage().play();
in their trigger or event handler.
How I got it to work:
<li><a href="javascript:var targetComp = AdobeEdge.getComposition('EDGE-57204389');
   targetComp.getStage().play();" class="three-d">
                              Dynamic
                              <span class="three-d-box"><span class="front">Dynamic</span><span class="back">Artisans</span></span>
                    </a></li>

Navigation Bar - links

I have an application with a button in the navigation bar which opens an URL. In this URL are a number of (3 or 4) user preference values which are derived from tables held within the database.
Currently I am running an "On Create Session" application process which loads up some hidden fields on page 1 of the app. These are then referenced by a javascript function to link to the dynamically created URL. Within this js function I am using a html_GetElement('P1_PARAM').value to build up the URL string and this works just fine... for page 1.
I don't want to load up hidden fields on every page to allow the Navigation Bar buttons to work from each page so I guess application level items would be the practical objects to use here.
The problem I am having then lies in the fact that the application items are not rendered in the html and so therefore are not going to be seen by the html_GetElement() function.
Can anyone point me in the right direction here.
Thanks in advance,
Mike

Hi Mike,
I think that the value of any Application Item is rendered.
1. If you check the session state that item is not shown, but is there.
I set Page region/Title to “Name F111_TEST” and it’s there
2. If you use Debug can see that the value of the Application Item “0.20: ...F111_TEST session state saving same value: Hello Konsta”.
3. Define an Application Item and do Application Computation on Before Regions for instance. Set Static Assignment 20 for instance. The VAT in Bulgaria is fixed to 20%.
4. In Page Attributes/HTML Header:
<script language="JavaScript" type="text/javascript">

</script>
5. You probably have tried getVal(' F101_TEST ') instate &F101_TEST.
The example above shows that Application Items are rendered and one could use them in JavaScript. I will be happy if you send a complete solution for Navigation bar.
Good luck
Konstantin
[email protected]

Display text in navigation bar when user is logged in

Hi all,
I'm (still ) on Apex 4.2.6.
Currently, I have in my page templates, the following snippet:
      <div class="logoBar">
          <img src="#IMAGE_PREFIX#themes/theme_125/images/logo_.png" />
          <h1><a href="#HOME_LINK#" id="uLogo">#LOGO#</a></h1>
        <div class="userBlock">
          <span>Username: &APP_USER.</span>
          #NAVIGATION_BAR#
        </div>
      </div>
I have the requirement to display both the username (APP_USER) and the company the user works for (Application item AI_COMPANY), only when the user is logged in. When the user isn't logged in; instead of those items, I have to show a login link. Well, I know how to only show a link to the login page, when the user isn't authenticated, using the navigation bar. Currently, when a user isn't authenticated; the page shows: Username: nobody. That's because it is in my page template. How can I only show the username when the user is logged in? And show the company name only then?
My first thought was to add an item in the navigation bar. But those items shows up as links. Is there a way to add a navigation bar item, and let it display as text? Sure, I could write a dynamic action on page 0 to remove the link, but I'm searching for a nicer/better sollution.
I apreciate your help!

Hi tomvdduin,
you can show company name which is already in your Application item(AI_COMPANY) by modifying the page template mentioned above.
<div class="logoBar">
<img src="#IMAGE_PREFIX#themes/theme_125/images/logo_.png" />
    <h1><a href="#HOME_LINK#" id="uLogo">#LOGO#</a></h1>
<div class="userBlock">
    <span>Username: &APP_USER.(&AI_COMPANY.)</span>
    #NAVIGATION_BAR#
</div>
</div>
I have included company inside ( ), you can change how you want to show.
for example
<span>Username: &APP_USER.</span><span>Company: &APP_COMPANY.</span>
Hope this helps you,
Regards,
Jitendra

Navigation bar moves

I've inserted a Flash navigation bar to the left of the
larger photos on my galleries. It's positioned just fine for a
panoramic but when I load another image, a vertical or full frame
horz. the nav bar moves up or down according to the size of the
photograph. I would like to have it anchored at a set distance from
the thumbnail images in the upper bar so it's not bouncing up and
down.
Here is a test page showing what I mean.
http://www.westlight.net/gallery/wildlifetest2.htm
This is probably DW8 101... or less but...help!

Put your navbar in a div above the gallery itself, center and
style it as
you wish .. then put the gallery in a div under that and it
should stay
within its div without interfering with the navbar.
Nice gallery. :)
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: DMX 2004: The Complete Reference, DMX 2004:
A Beginner''s
Guide, Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development
"westlight" <[email protected]> wrote in
message
news:esuj8u$h2f$[email protected]..
> I've inserted a Flash navigation bar to the left of the
larger photos on
> my
> galleries. It's positioned just fine for a panoramic but
when I load
> another
> image, a vertical or full frame horz. the nav bar moves
up or down
> according to
> the size of the photograph. I would like to have it
anchored at a set
> distance
> from the thumbnail images in the upper bar so it's not
bouncing up and
> down.
>
> Here is a test page showing what I mean.
>
http://www.westlight.net/gallery/wildlifetest2.htm
>
> This is probably DW8 101... or less but...help!
>
>
>
>

How to implement a side navigation bar which can handle commandLink

Hi,
I was wondering if you could give me some pointers. I am designing a web site and on the left there will will be a dynamic menu bar. For eg if you do mouseOver on any one of the menu's items, a sub menu pops is displayed and so on.
But I was these menu's to be such that they can handle <jsp:commandLink > tag.. any ideas?
Thanks.

arijit_datta wrote:
<jsp:commandLink > Huh? Aren't you talking about the JSF h:commandLink?
Anyway, that kind of navigation menu can easily be achieved with CSS and in some cases also a little bit Javascript. Install Google on your machine and feed it with the keywords "suckerfish menu" and you'll find a lot of examples.

Dynamic navigation from ZCOMP1 to ZCOMP2

Hi experts,
Hope you are all doing good!
This is the first time I'm working with the dynamic navigation. So, I'm just trying to understand how really it works with two custom components.
I've already searched this forum n got some info. But, I'm getting confused with the procedure.
While calling the target component, I see the below code:
lr_window ?= me->view_manager->get_window_controller( ).
lr_window->call_outbound_plug( iv_outbound_plug = 'TOCOMP2' iv_data_collection = lr_data_collection ).
and in another thread, they used:
lr_navigation = cl_crm_ui_navigation_service=>get_instance( ).
CHECK lr_navigation IS BOUND.
lr_navigation->navigate_dynamically( lr_col ).
Can someone help with the difference between these methods? I really need this to understand clearly before proceeding further.
I would really appreciate if someone can provide the generic procedure to achieve this. Thank you a lot.
-Ezhno.

Hi Maren,
WebUI Navigation guide - for more Info.
Dynamic navigation will be perform only if they have generic mapping entry in navigation bar profile in spro. At runtime webui picks the target id and calls the inbound plug to the target link.
if you are trying to perform navigation on the standard component, then you can directly check the config in spro and perform the navigation using a descriptor object.
and if its for the custom component then u have to define a workarea component repository
check my answer in below thread How to link view to be displayed on a logical link. Use first three screen shots to define work area repository
Once u have defined your target id for your ZComponent , then u can create a new your new mapping in spro for your ZComponent, like below screenshot and perform dyanmic navigation.
Now to perform dynamic navigation sample code .
   data: lr_nav_descr      type ref to if_bol_bo_property_access,
        lr_core                     type ref to cl_crm_bol_core,
        lr_nav_serv       type ref to if_crm_ui_navigation_service,
        lr_header           type ref to cl_crm_bol_entity,
        lr_entity type ref to if_bol_bo_property_access,
        lr_col           type ref to cl_crm_bol_bo_col.
*     Get the BOL Core Instance
lr_core ?= cl_crm_bol_core=>get_instance( ).
* get the BuilHeader object
lr_header = lr_core->get_root_entity( iv_object_name = 'BuilHeader'
                                        iv_object_guid = lv_partner_guid ).
* add the Builheader to the collection
create object lr_col.
lr_col->if_bol_bo_col~add( iv_entity = lr_header
                             iv_set_focus = abap_true ).
cl_crm_ui_descriptor_obj_srv=>create_ui_object_based(
           exporting
                     iv_ui_object_type   = 'BP_ACCOUNT'
                     iv_ui_object_action = 'B'
           receiving rr_result           = lr_nav_descr ).
lr_nav_serv = cl_crm_ui_navigation_service=>get_instance( ).
* check if navigation is possible
if lr_nav_serv->is_dynamic_nav_supported( ir_descriptor_object = lr_nav_descr ) = abap_true.
    lr_col->if_bol_bo_col~insert( iv_bo    = lr_nav_descr
                                iv_index = 1 ).
*   start the navigation
    lr_nav_serv->navigate_dynamically( iv_data_collection = lr_col ).
endif.
As per as configurations navigate_dynamically will check the spro config as it will navigate to the target id of the BP as display mode i.e on overviewpage.
Now comes to the first question......
lr_window ?= me->view_manager->get_window_controller( ).
lr_window->call_outbound_plug( iv_outbound_plug = 'TOCOMP2' iv_data_collection = lr_data_collection ).
here you are trying to get the instance of the window controller and then your are calling to the Window Outbound plug and passing the collection using a navigation_link.
where inbound and outbound plugs are defined.
Steps :
Create an outbound plug on the source view
Create an inbound plug for target view.
Create an event handler for the navigation event
Method EH_xxx.
Op_xxx.()
ENDMETHOD.
Create a navigation link between the source and target view.
In the outbound plug, call following code snippet.
Me->view_manager->navigate(source_rep_view = me->rep_view
Outbound plug = <navlink>) or you can call the window plugs and perform
Create an inbound plug for target view.
If you have any questions, let me know.
Regards,
Sumeet Gehlot

Navigation Bar Profile - Copying business role SalesPro

Dear all,
i am on CRM 7.0 and i have to create a business role copying the standard one SalesPro. Easy.
Therefore, i want to create a navigation bar profile ZSales pro copying the one already used SLS-PRO for the standard one. But when i make the copy, the system requires an entry in the field Action Object for the entry Object Type: BP_ACCOUNT_CHM, Object Action: "empty in standard", target id: MD_BP_OV and highligth: MD_BP_SR where it is blank in standard !!!
The copy then is not fully done and i cannot create an entry with empty field, how can i manage this, please ?
Thanks for your help,
Jay

Hi,
Refer to this thread Error inNavigation bar creation.
Similarly you can skip those entries for the time being and later maintain it again if needed for dynamic navigation.
Hope this helps.
Cheers,
Sumit Mitta

Getting error Dynamic navigation to this object is not supported in CRM 7.0

Hi All,
I am getting Error " Dynamic navigation to this object is not supported " when I am tryiong to Create a Follow up request " Service Request " for the interaction record in SAP CRM 7.0. I have tried to find a solution using the Navigation bar profile where we define the generic outbound plug mapping however I have no good luck regarding this... :-(
Regards,
AB

Hi All,
I am getting Error " Dynamic navigation for object CRM_SRQM_INCIDENT and action B not supported " when I try to run a task workflow for a "Service Request " .
I have tried to find a solution using the Navigation bar profile where we define the generic outbound plug mapping however I have no good luck regarding this.
attached a sample screen
Regards,

How do I add a Recent Objects direct link group to the navigation bar?

Hi
I've noticed in some of the tutorials in the eLearning section there is a Recent Objects direct link group. I presume this is a dynamic collection of recent activities the user has created similar to the My Recent Documents folder you see in the Start menu in Windows XP.
Does anyone know how to implement this functionality to the navigation bar in the WebClient UI? I know how to add a direct link group to the navigation bar but I don't see any trace of this recent objects functionality.
Cheers
Declan

Hi Vikash
Thank you for you advice. However the IMG activity Define Business Role does not allow me to add a new entry.
Instead I used the IMG activity: CRM > UI Framework > Technical Role Definition > Define Navigation Bar Profile. I double clicked on Define Profile, selected my business role and double clicked on Assign Direct Link Group. I tried to enter the Group ID REC_ITEMS but it produced an error saying Entry REC_ITEMS does not exist in CRM_UI_DLG (check entry).
Can you advise further please?
Cheers
Declan

How to create a navigation bar entry with onclick event

I have requirement of creating navigation bar entry with a an "on click" event. When a user clicking time a location list should open. I didn't understand how to do it on NAVIGATIONBAR_ENTRY.
Also Navigation Bar Entry IMage is not displaying.
Regards
Edited by: satheeshkumars on Oct 25, 2010 7:52 PM

Do you specifically need to use the onclick event, or do you jts want to run Javascript from the navbar entry? If the latter then you can use the URL method and set the URL to:
javascript:myfunction()
If it must be an onclick event then I think you would need to attach it dynamically in Javascript (using jQuery if available) to locate the link somehow (it's not easy to give it a unique ID unfortunately).
Edited by: Tony Andrews on Oct 26, 2010 10:35 AM

How to create a navigation bar

I wanted to create a navigation bar exactly like the one seen
at the top of this website
http://stage6.divx.com/ whenever
i seem to insert a table and then insert my navigation buttons i
cant move it to the top of the page, i also wanted to know how to
centralise these buttons if you look on the example i posted
whenever you re-size your inet browser window the buttons go with
it. any help
Thanks in advance
Rph =D

Do you specifically need to use the onclick event, or do you jts want to run Javascript from the navbar entry? If the latter then you can use the URL method and set the URL to:
javascript:myfunction()
If it must be an onclick event then I think you would need to attach it dynamically in Javascript (using jQuery if available) to locate the link somehow (it's not easy to give it a unique ID unfortunately).
Edited by: Tony Andrews on Oct 26, 2010 10:35 AM

HELP on Portlet acting as a navigation bar

Hi all,
I am trying to create a navigation bar and publish it as a portal. Then when a button is clicked on that portlet I want the second portlet of the page to open up a dynamic page.
Any ideas on how to do this?
Regards,
Kostas

Chetan,
Thank you for that. However, this is changing the portlet the navigation bar is in and not the other one!!!
I would like it to change the second portlet. Any ideas on how to do it?
Thanks,
Kostas

Encoding URs in Navigation Bar (static page)

Hi,
          I have run into a problem and I have no clue how to solve it.
          Hopefully, somebody would be able to help me out.
          I am using tomcat and jsp pages. My jsp page basically has a top bar,
          a navigation bar on the left hand side and a body part. If I disable
          cookies, then the web container doesnt recognize the session if one of
          the buttons in the navigation bar is clicked(after logging in).
          I guess I have to encode the urls in the navigation bar and not have
          hard coded urls there,so that the web container can recognize the
          sessions (url rewriting).
          How can I encode these urls in the navigation bar??????
          If I have a dynamic page, then one can write response.encodeURL(url);
          and it works perfectly, but I cannot do this in my navigation bar
          url´s as it is not a dynamic page.
          Can somebody please shed some light on this issue and help me out.
          Thanks!
          Sanjit


By any chance have you cleared your browser cache?

Dynamic navigation bar

Similar Messages

Maybe you are looking for