onClick Event Banner in Application Layout - xpages

I have got an application layout with an image as banner. Is it possible to bind an event handler with an onclick event to the image in the banner?
<xe:applicationLayout id="applicationLayout1"><xp:this.facets></xp:this.facets>
<xp:callback facetName="facetMiddle" id="facetMiddle"></xp:callback>
<xe:this.configuration>
<xe:oneuiApplication productLogo="/ise_logo.png"
productLogoHeight="70px" productLogoWidth="250px">
<xe:this.bannerUtilityLinks>
</xe:this.bannerUtilityLinks>
<xe:this.titleBarTabs>
</xe:this.titleBarTabs>
<xe:this.footerLinks>
</xe:this.footerLinks>
</xe:oneuiApplication>
</xe:this.configuration>
</xe:applicationLayout>

Add a class to your logo as Application Layout Banner's parameter with productLogoClass="applicationLogo".
Add then a client side onclick event for this class on client load with
var applicationLogo= dojo.query('.applicationLogo')[0];
applicationLogo.onclick = function() {
alert('clicked on logo');
}
In client side event code you can execute a partial refresh with XSP.partialRefreshGet or XSP.partialRefreshPost like shown here.

Related

Primefaces NotificationBar close icon not visible

In the documentation of primefaces, it is said that "Note that notificationBar has a default built-in close icon to hide the content.". But so far I could not get it displayed ? Is there a special property or facet required to show the close icon ?
pf version I am using is 6.2
If you see the notification.js resource inside the Primefaces library, you can see that they took into account to give to the close icon the "hide functionality":
primefaces-6_2\src\main\resources\META-INF\resources\primefaces\notificationbar\notificationbar.js =>
/**
* PrimeFaces NotificationBar Widget
*/
PrimeFaces.widget.NotificationBar = PrimeFaces.widget.BaseWidget.extend({
init: function(cfg) {
this._super(cfg);
var _self = this;
//relocate
this.jq.css(this.cfg.position, '0').appendTo($('body'));
//display initially
if(this.cfg.autoDisplay) {
$(this.jq).css('display','block')
}
//bind events
this.jq.children('.ui-notificationbar-close').click(function() {
_self.hide();
});
},
So, considering the previous code, if a children component has the ui-notificationbar-close class and you click on it, the NotificationBar component will be hided calling to hide function automatically (without having to use the PF(widgetVar).hide().
I have tested with the following code and in effect, the notificationbar disappears after clicking on the close icon:
<p:notificationBar id="notificationBar" position="top" effect="slide" styleClass="top" widgetVar="myNotificationBarWV" autoDisplay="false">
<i class="ui-icon ui-icon-closethick ui-notificationbar-close"></i>
<h:outputText value="You Rock!" style="font-size:1.5 rem;"/>
</p:notificationBar>

How to call SSJS function from computed HTML link?

I have a computed field on an xpage the result of which is HTML. In that HTML I want to compute a link that will trigger some server side js function followed by a partial refresh.
My current code looks like this:
Click Here
This will work if my js function is a client-side function but I want to use this function to set the value of a field on the document so I need SSJS.
Static links that are created from the controls pallet in an xpage allow the link to call SSJS with partial refreshes. How can I do this with a computed HTML link?
Another option could be creating your own event handler and executing that via client side JavaScript code described in this article. So suppose you create an event handler something like this:
<xp:eventHandler event="name" id="eventhandler1a">
<xp:this.action>
<xp:saveDocument />
</xp:this.action>
</xp:eventHandler>
You can then create a function to call this event handler via JavaScript code:
XSP.executeOnServer = function () {
// the event handler id to be executed is the first argument, and is required
if (!arguments[0])
return false;
var functionName = arguments[0];
// OPTIONAL - The Client Side ID that is partially refreshed after executing the event handler
var refreshId = (arguments[1]) ? arguments[1] : "#none";
var form = (arguments[1]) ? this.findForm(arguments[1]) : dojo.query('form')[0];
// catch all in case dojo element has moved object outside of form...
if (!form)
form = dojo.query('form')[0];
// OPTIONAL - Options object containing onStart, onComplete and onError functions for the call to the
// handler and subsequent partial refresh
var options = (arguments[2]) ? arguments[2] : {};
// OPTIONAL - Value to submit in $$xspsubmitvalue. can be retrieved using context.getSubmittedValue()
var submitValue = (arguments[3]) ? arguments[3] : '';
// Set the ID in $$xspsubmitid of the event handler to execute
dojo.query('[name="$$xspsubmitid"]')[0].value = functionName;
dojo.query('[name="$$xspsubmitvalue"]')[0].value = submitValue;
this._partialRefresh("post", form, refreshId, options);
}
You can then call the event handler via this client side JavaScript code:
XSP.executeOnServer('#{id:eventhandler1a}', '#{id:panel1}')
Here panel1 refers to control which would be partially refreshed.
You can stick with your code if you use the XSP Object in the myFunction() client side function. This allows you to call a partial refresh. The other option is to call a Extlib JSON control and have your logic there. Depends a little on your coding style
The link control is not static. You can compute whatever you want, for example:
<xp:link escape="true" id="lnk">
<xp:this.value><![CDATA[#{javascript:"#"}]]></xp:this.value>
<xp:this.text><![CDATA[#{javascript:"Label here"}]]></xp:this.text>
</xp:link>

How to integrate Stripe "Pay with Card" in backbonejs

I am trying to integrate Stripe "Pay with Card" checkout into backbone Node environment. On the server side, I am using Stripe Node code - that part works good. However, on the client side, I am unable to capture the event.
I would like to capture the submit event from the Stripe popup to call "paymentcharge" method in the view.
Here is my code:
<!-- Stripe Payments Form Template -->
<form id="stripepaymentform" class="paymentformclass">
<script
src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"
data-key="pk_test_xxxxxxxxxxxxx"
data-amount="0299"
data-name="MyDemo"
data-description="charge for something"
data-image="assets\ico\icon-72.png">
</script>
</form>
Backbone View Class
myprog.PaymentPanelView = Backbone.View.extend({
initialize: function () {
this.render();
},
render: function () {
$(this.el).html(this.template());
return this;
},
events : {
"submit" : "paymentcharge"
},
paymentcharge : function( event) {
this.model.set({stripeToken: stripeToken});
}
});
Backbone Model Class
var PaymentChargeModel = Backbone.Model.extend({
url: function(){
return '/api/paymentcharge';
},
defaults: {
}
})
Setup/Call the View from header menu event
if (!this.paymentPanelView) {
this.paymentPanelView = new PaymentPanelView({model: new PaymentChargeModel()});
}
$('#content').html(this.paymentPanelView.el);
this.paymentPanelView.delegateEvents();
this.selectMenuItem('payment-menu');
I think the problem has to do with your View's el and the event you are listening for.
You never explicitly define your View's el, which means it gets initialized to a detached <div> element. You then use your template to fill that <div> with the form element from the template. Even though your <div> is detached, you get to see the content, because you add the content of you el to #content using jquery.
I think the problem is that you are listening for a submit event on the <div> in your el, not the contained <form>. Try changing your events hash to this:
events: {
'submit form#stripepaymentform': 'paymentcharge'
}
Basically, listen for events on the contained element like in jquery's .on. You can also go right to a button click, something like this:
'click #mysubmitbutton': 'paymentcharge'
Hope this helps!

Onclick event in Outline gets executed on page open

I have an extension library outline control. I have two basicLeafNodes in the outline. The onclick event on each of these nodes is supposed to run some code. The problem is both of those onClick events are being executed when the page is open but does not seem to execute when you actually click on the node.
Any idea what could be wrong?
<xe:outline id="outline1">
<xe:this.treeNodes>
<xe:basicLeafNode label="Set Value 1">
<xe:this.onClick><![CDATA[#{javascript:getComponent("inputText1").value = "123";}]]></xe:this.onClick>
</xe:basicLeafNode>
<xe:basicLeafNode label="Set Value2">
<xe:this.onClick><![CDATA[#{javascript:getComponent("inputText2").value = "456";}]]></xe:this.onClick>
</xe:basicLeafNode>
</xe:this.treeNodes>
</xe:outline>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:br></xp:br>Value 1: 
<xp:inputText id="inputText1"></xp:inputText>
<xp:br></xp:br>Value 2: 
<xp:inputText id="inputText2"></xp:inputText>
The onClick event of the basicLeafNode is for client-side JS only. You need to use the submitValue property of each basicLeafNode to and then add SSJS to the onItemClick event of the outline control. You can then use context.getSubmittedValue() to check what node was clicked and then act accordingly:
<xe:outline id="outline1">
<xe:this.treeNodes>
<xe:basicLeafNode label="Set Value 1" submitValue="1"></xe:basicLeafNode>
<xe:basicLeafNode label="Set Value2" submitValue="2"></xe:basicLeafNode>
</xe:this.treeNodes>
<xe:this.onItemClick><![CDATA[#{javascript:
if (context.getSubmittedValue() == "1") {
getComponent("inputText1").value = "123"
} else if (context.getSubmittedValue() == "1") {
getComponent("inputText2").value = "456"
}
}]]></xe:this.onItemClick>
</xe:outline>
From the XPages Extension Library book (page 240):
The onClick property allows the developer to execute a piece of
Client-Side JavaScript code, and the submit- Value property allows the
developer to specify a value that is passed back to the server. This
value is accessed from the onItemClick event of the control that
contains the tree nodes.

WinRT Event Handling from DataTemplate

I have a DataTemplate which requires an event handler for one of the objects. This DataTemplate is contained in a ResourceDictionary. What is the best way to add an event handler to this template?
I tried defining the event handler in app.xaml.cs but the handler isn't executing. Creating a code behind file for the ResourceDictionary leads to load errors during app start up in MergedDictionaries.
from GraphStyles.xaml
<DataTemplate x:Key="PieTemplate">
<Grid HorizontalAlignment="Left" Width="350" Height="350" >
<Border>
<Charting:Chart
x:Name="PieChart"
Title="Play Attempts"
Margin="70,0" Loaded="PieChart_Loaded">
<Charting:Chart.Series>
<Charting:PieSeries
Title="Attempts"
ItemsSource="{Binding Items}"
IndependentValueBinding="{Binding Name}"
DependentValueBinding="{Binding Value}"
IsSelectionEnabled="True" />
</Charting:Chart.Series>
</Charting:Chart>
</Border>
</Grid>
</DataTemplate>
in App.Xaml.cs
private void PieChart_Loaded(object sender, RoutedEventArgs e)
{
var pieChart = sender as Chart;
var legendItems = ((PieSeries)pieChart.Series[0]).LegendItems;
foreach (LegendItem item in legendItems)
{
pieChart.LegendItems.Add(item);
pieChart.LegendStyle = item.Style;
}
}
Option 1
As far as I am aware you will have to reference the datatemplate in the page/usercontrol's Resources at the top. Use a merged dictionary so you can still utilize the graphstyles.xaml.
If you are uncomfortable as this breaks your convention, there is a rather long winded alternative:
Option 2
Use an MVVM Viewmodel and set the page/usercontrols DataContext.
Keep the datatemplate in the graphstyles.xaml and use an Attached Behavior to hook the Loaded event, passing the event trigger up to the viewmodels command.
Create an event in the ViewModel that the UI can respond to, then hook onto that and handle in the Views codebehind as you have done.
I must say I'm not mad on Option 2 as it kind of breaks some view/VM seperation but it should get the job done - note that you will have to pass the chart as an object through from the attached behavior, to the viewmodel then back to the view against before you cast it back to a Chart.

Resources