Hiding and Displaying XPages Custom Controls from HREF - xpages

In an XPages application I've been given the following HTML code for a navigation bar which will be used to select which of three different Custom Controls display:
<ul class="Navigation">
<li>Option One</li>
<li>Option Two</li>
<li>Option Three</li>
</ul>
I know lots of ways to display or hide Panes or Divs or Custom Controls from buttons or code but I can't figure out how to do it from a simple HREF call. I've tried hiding a div using dojo which works in CSJS in a button but not here, and using CSJS to set a sessionScope variable which of course doesn't work:
<li>Option One</li>
<li>Option Two</li>
I'd appreciate any help with this. Thanks very much in advance!

If you want to hide a custom control based on url. I believe that's can be done via the dynamic content control that comes with the ext library or 9.0x. I might have the name wrong but should be close. I think there's an example in the ext library demo app that you can get from OpenNTF.

You could hide the whole <li> element by using a panel:
<xp:panel tagName="li" rendered="...">
...
</xp:panel>
Just calculate the rendered property with your logic for that panel element.

Use XSP.partialRefreshGet() or XSP.partialRefreshPost() to refresh your panel with all custom controls from client side. Set a parameter "option" with the current value.
javascript:XSP.partialRefreshGet("#{id:panelAll}", {params: {'option': 'One'}}
Refresh the panel on server side testing the delivered option with
param.option == 'One'
and render your sub panels accordingly.

If it must be
href="optionOne"
or similar, you could try with
href="currentpage.xsp?nav=optionOne"
and use param.nav in your code to find out which option is selected. Much like Knut's idea, but then doing a full refresh.

Related

Change the looks of selected navigator item

I've been playing around with Extension Library Navigator for a while and I can't figure out how to make the selected (or the current opened pages basic node) node to change any of the looks properties, for example font or color. I'm trying to do that so that user can tell what page is currently opened. Any tips on how to do that?
Another option, which is not as simple as the one suggested by Per, is to do the customization via a bit of script.
For example, I have built my site navigation with pure HTML and bootstrap.
My link HTML looks like this
<a id="YOURLINKIDHERE" href="vwBringUpsByDate.xsp">Bring ups</a>
When a page loads, you can then then use the below script to customize your selected menu item exactly how you like, fonts, colours, backgrounds etc just by referencing the link ID....
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[$("*[id$='YOURLINKIDHERE']").css('background-color', '#eeeeee');]]></xp:this.script>
</xp:eventHandler>
Not ideal, as you have to put the script on each page that you want to modify a menu link with, but gives you some good customization options...

notes style field in xpages

Is there any possibility to make an editbox in xpages that looks like an editable field - notes style from Lotus Notes? Or to be able to display the field value in more lines, if it necessary ?
I tried adding Auto for the editbox, but it no works.
rows and cols properties allow you to change the size. You can also use Dojo Simple Text Area or Dojo Text Area controls from Ext Lib. The latter auto-expands depending on the content, so rows and cols are not applicable (see the part in XPages Extension Library book on that).
If you're talking about the field handles round the top left and bottom right of a field, I don't think web development supports partial borders. It will be a generic CSS web development solution you require, rather than anything specific to XPages.
I know this is kind of late but here's what I came up with:
https://codepen.io/gcoxdev/pen/MmdrYz
<div class="notes-field">
<div class="notes-editable contenteditable="true"></div>
<textarea name="test"></textarea>
</div>
Of course, you'll have to convert that to xpages markup.
Essentially I'm creating a content-editable div with unicode characters for the handles then updating the underlying textarea with javascript.
You can read my article about it here:
http://gcoxdev.com/xpages-notes-style-field
Hope that helps!

Jquery dialog box issue - replace alert by dialog

I try to have a function to display a box with calling dialog('Hello') for example.
I just want to replace the basic function alert by dialog jquery but I don't succeed.
Please help me
**Steps** :
Create a div with id : dialog. Also set it's class
Set the css property of the class display:none
Align it in center with width and height 25%
Create a function dialog(str) that accepts msg as a parameter
Use jquery to change the class of div dialog and set the css property display:block
In the div that you created place a small ok button and map it's click event to a function that hides the div or set's property : display:none
i got this working once i was using it.
$(function() {
$( "#messagebox" ).dialog();
});
And you need some info to go in that box, with this code.
<div id="messagebox" title="some title">
<p>You type your message here</p>
</div>
you use the id to identify which box, and then the rest gives itself :) good luck.. hope it helps. should be easy.

How to create a general-purpose VisualForce page that can appear on any layout?

VisualForce pages can have the format:
<apex:page standardController="Case" >
<div id="content"></div>
<script>
... javascript to render a UI into #content ...
</script>
</apex>
which means it can appear on the "Case" layout. If you want a generic VisaulForce page (appearing all alone on a tab, let's say) you can remove the standardController parameter:
<apex:page>
...
</apex>
Is there a way to specify that a single VisualForce page can appear anywhere? (In our case, it's a javascript utility which is not layout-dependent).
I'm new to SalesForce, and the closest I could come up with would be to dynamically populate the standardController field (if that is supported) but I feel there must be a better way. Any help is greatly appreciated!
Do you mean it's a piece of javascript you can include in other pages? If so you should be doing it as a component, or you could put the JS in a static resource and include that in your pages.
If it's actually a page, you can include it in a page layout as well, though it's a little clunky and goes in an iFrame so that would probably cause problems for you.

Is it possible to format a NumberField in a page layout?

I'm developing a SharePoint publishing site and setting up its content types and page layouts. I need to display the value for a Year field with type Number. The markup currently is:
<SharePointWebControls:NumberField FieldName="Year" runat="server" id="Year" />
The problem with the default behaviour is that it shows each number with a comma, e.g. "2,009" instead of "2009". Is there a way I can set some sort of String.Format syntax on the field to make it display correctly?
I tried creating a new rendering template which looks like this:
<SharePoint:RenderingTemplate ID="YearNumberField" runat="server">
<Template>
<SharePoint:FormField ID="TextField" runat="server"/>
</Template>
</SharePoint:RenderingTemplate>
... but there doesn't appear to be any 'Format' property on the FormField object.
Thanks for any help.
Update:
I tried wrapping the SharePoint:FormField tag inside SharePoint:FormattedString. Unfortunately the field was not formatted, same results as this question.
The issue is that the rendering template must use FormField. This always renders the value in the format: 1,989 . To resolve this the rendered text needs to be trapped and altered to get the desired output. Here are two approaches to resolving this:
1. Write a custom control inherited from NumberField
The RenderFieldForDisplay and RenderFieldForInput methods can be overridden to provide the desired output. Additional properties can be added to the control to describe additional behaviour.
Pros: No changes to rendering templates required.
2. Write a custom control for use in the rendering template
A control that (for example) uses regular expressions to alter text can wrap around the FormField control.
<SharePoint:RenderingTemplate ID="YearField" runat="server">
<Template>
<RX:RegexManipulatorControl runat="server"
Mode="Replace"
Expression=","
Replacement="">
<SharePoint:FormField runat="server"/>
</RX:RegexManipulatorControl>
</Template>
</SharePoint:RenderingTemplate>
Pros: Generic solution can be used for any type of field.
from Just Another SharePoint Blog
Open the list view in SharePoint
Designer.
Right click on the data view web part.
(the list)
Select Convert to XSLT Data View
Click on the number field you would
like to format
A > will appear showing Data Field,
Format As
Click on the link below Format As -
Number formatting options
Under Options deselect Use 1000
separator
Click OK
Save your changes and hit F12 to
preview

Resources