Portlet title editing functionality into portlet body - liferay

As the title mentions, I was wondering whether there's a relatively simple way to use the functionality to edit the portlet title inside a portlet.
That is, when clicking a span contained in a portlet, it would then become editable (through an input box) in order to, then, update a portler preference.
This can probably be done from scratch, but since the functionality is already present in Liferay, there might be a way to make use of it.

Yes, you can update a Portlet title with a simple ajax call.
PFB the examplejQuery code and mandatory parameters to be sent to update the Portlet title.
$.ajax({
url: "/c/portlet_configuration/update_title",
method: "POST",
data: { p_auth:'vcYb1DvX',
p_l_id:'10187',
portletId:'56_INSTANCE_hbJBswwx0rYg',
title:'My Webcontent'
},
success: function(data){
},
error: function(jqXHR, textStatus, errorThrown) {
}
});

Sounds like you want an "In Place Editor". For YUI (which is the underlying JS library for AlloyUI, bundled in Liferay), the first hit I get is this project, but with this search term you'll be able to find the component that suits your needs best.

I didnt clearly understand your question. Still, i am answering your question.
In my project, we provide custom title where we will update the custom portlet title for the portlet by getting the name entered in the text box in my preference page using below code:
// write this code in action method
PortletPreferences preferences = actionRequest.getPreferences();
String portletTitle= actionRequest.getParameter("portletTitle"); (title entered in text box)
preferences.setValue("portlet-setup-title-en_US",portletTitle); // update the portlet title of the portlet
preferences.setValue("portlet-setup-use-custom-title","true");// setting to receive custom title
preferences.store(); //stores the preference
Hope this helps

Related

How to embed a portlet in an in-page popup in Liferay 7 [duplicate]

This question already has an answer here:
Display portlet in pop-up Liferay
(1 answer)
Closed 5 years ago.
From JavaScript, I need to create an in-page (DIV-based?) popup that shows a particular portlet.
This looks exactly like what I need:
https://web.liferay.com/community/wiki/-/wiki/Main/Using+Pop-up+in+Liferay
Liferay provides a class called Expanse.Popup to implement this type of pop ups. Here is how this type of pop up would look like:
This javascript code will make an asynchronous call to the url we give it and will place the content in our page. Below there is an example which will load the url 'url' in a pop up called 'our title':
var popup = new Expanse.Popup(
[...]
Problem: Unfortunately, when I put that code in my portlet and deploy&run it, I get:
TypeError: Expanse.Popup is not a function
According to the comments at that page, the function has changed names many times. I have tried Alloy.Popup, A.Popup, Liferay.Popup, all fail in a similar way. Also, I have read that AUI is deprecated and not recommended for new development.
Liferay.Util.openWindow works but unfortunately it takes an URL as a parameter, rather than a portlet. Is there any way to make it show a portlet? I don't want to create a page for this on all sites.
Question: How to implement this in-page popup that loads a portlet, in Liferay 7?
It can be modal or not: I don't mind if users can let the popup open and interact with the rest of the page.
The openWindow is a good approach. If you look at the portlet options and how a configuration dialogue gets opened you get something like this
Liferay.Portlet.openWindow({
bodyCssClass: 'dialog-with-footer',
destroyOnHide: true,
namespace: '_com_liferay_polls_web_portlet_PollsDisplayPortlet_INSTANCE_qOP6anrnoY5o_',
portlet: '#p_p_id_com_liferay_polls_web_portlet_PollsDisplayPortlet_INSTANCE_qOP6anrnoY5o_',
portletId: 'com_liferay_polls_web_portlet_PollsDisplayPortlet_INSTANCE_qOP6anrnoY5o',
title: 'ASDF',
uri: 'portlet render url'
});
The URL is required to pinpoint the portlet that you actually would like to render but you can generate one for you easily by the liferay-portlet:renderURL tag(it takes the portlet id as parameter) or you can construct if your self if you know the syntax(not recommended)

Richfaces 4.2 and TinyMCE

I am trying to use Richfaces 4.2 and my own custom TinyMCE rich text editor (based on version 3.5.11).
The editor was installed like the official tutorial (http://www.tinymce.com/wiki.php/Installation). It works and the editor is applied to any textarea.
My problem is after ajax submits, when the form is re-rendered, so the TinyMCE instance is lost and not applied anymore.
Is there some way to deal with it, reapplying the TinyMCE on every ajax submit or any other approach?
I did a workaround that allowed TinyMCE to interact with Richfaces ajax actions and renders, so I will answer my own question although I believe its not the best answer possible.
Here is my solution:
Copy TinyMCE folder to my WebContent/js folder, including the tiny.js which is a init file (external file optional).
This file contains both the tinyMCE init config and the JSF2 javascript that join tinyMCE and render actions.
Here is the tiny.js code:
jsf.ajax.addOnEvent(function(data) {
switch(data.status) {
case "begin":
tinyMCE.triggerSave();
break;
case "complete":
break;
case "success":
var i, t = tinyMCE.editors;
for (i in t){
if (t.hasOwnProperty(i)){
t[i].remove();
}
}
tinyMCEinit();
break;
}});
function tinyMCEinit(){
tinyMCE.init({
language : "pt",
mode : "textareas",
theme : "advanced",
mode : "textareas"
});}
What JSF 2 Javascript do is call the tinyMCEinit() function that cleans all textareas and reapply it all again. It works nice when you open the page for the first time, maybe a little heavy DOM processing, but the final user will no notice the loading... unless you page have 4 texareas/editors and need to be editable like a list of Alternatives Question. 4 editors on the same page have slow loading time and previous rich:editor/ckeditor will notice the performance lost.
Well, one little touch of javascript needs to be added to your "Save" buttons like this:
<a4j:commandButton onclick="tinyMCE.triggerSave();" render="some_panel" value="Any render"></a4j:commandButton>
The triggerSave() transfer the values (html) on the editor to the h:inputTextarea so JSF can grab the values and send it to the backend.

How to open an existing entity form using JavaScript in CRM?

If a custom ribbon button is clicked, is it possible to open an existing entity form using JavaScript or is there some other ways to open the existing form (e.g. campaign form)?
function PopNewCase() {
Xrm.Utility.openEntityForm("incident", "GUID_OF_EXISTING_CASE");
}
Yes, you can, check this link. This explains the JavaScript part.
http://social.microsoft.com/Forums/en-US/crmdevelopment/thread/de870f82-a4e0-49fa-abfd-06918098c86e
You need to pass entity type and record's guid into the url.
And here explains how to call a JavaScript function on ribbon button click,
http://nishantrana.wordpress.com/2010/11/04/using-javascript-in-a-custom-button-in-crm-2011/
Using Visual Ribbon Editor might make things a bit easier.
http://crmvisualribbonedit.codeplex.com/
edit:
Example from http://msdn.microsoft.com/en-us/library/gg328483.aspx
window.open("/main.aspx?etn=account&pagetype=entityrecord&id=%7B91330924-802A-4B0D-A900-34FD9D790829%7D");
replace "account" with the entity type you want, and replace "7B91330924-802A-4B0D-A900-34FD9D790829" with the guid of the record you want.
Might use a function like this
function OpenRecord(entityName, recordId)
{
window.open("/main.aspx?etn=" + entityName + "&pagetype=entityrecord&id=%7B" + recordId + "%7D");
}

Wicket : Can a Panel or Component react on a form submit without any boilerplate code?

I am currently evaluating Wicket and I am trying to figure out how things work.
I have a question regarding form submit and panels (or other components).
Imagine a custom wicket panel which contains a text field, doing as-you-type validation using ajax. This panel is added to a form.
How can the Panel react a form submit (let's say because javascript/ajax is unavailable)?
I am currently only aware of one solution: calling a panel's method inside the Form onSubmit() method. But this seems not like a "reusable" approach here, because I have to add boilerplate code to every form's onSubmit() which contains the panel (and every developer which use the panel must know this).
So here comes my question: Is there any way that a Panel/Component can "detect" a form submit in some way? Or is there any other solution beside this?
Thank you.
Make your panels implement org.apache.wicket.markup.html.form.IFormModelUpdateListener, and the updateModel() method should be called when the containing form is submitted and passes validation.
There's a good example of code using this by one of the wicket authors at the Wicket In Action blog.
Well, you could simply do the following:
Panel{
Form{
onSubmit(){
Panel.this.onSubmit();
}
}
protected void onSubmit(){}
}
...
This means that any panel that extends your panel need only override the onSubmit and the form no matter what it is in html will call that method. That way you can extend the panel and only override one method for each form.
With regard to form components, the framework handles it for you transparently. Forms are aware of any child form components, even if they haven't been added directly to the parent form.
I would have a Form inside that Panel. This way, you can reuse that Panel without requiring an external Form. As Forms can not be nested inside each other in HTML, Wicket will swap the inner Form(s) into 's transparently, but will make sure that each of the inner Forms takes part of the form processing (validation,..).
You can override the OnSubmit() function of the Form in your Panel. Wicket will call it for you.
what do you mean by "react"? I have only started recently with Wicket, but FWIK, form submit updates the model of a component, and then it calls onSubmit(), which you can override to take special actions beyond that. See Wicket in Action, chapter 6.
After that, the page (and it's components) get re-rendered, using the updated model, so basically, they really "react" on a submit, with quite few lines of code.
For your mentioned case with Component in a Form, have a look at the CompoundPropertyModel.
Implementing IFormSubmitListner and IFormModelUpdateListener shall call the respective methods during a form submit.
However, if you want to do some processing after form submit, I'm afraid you have no choice but to write some boilerplate code yourself.

ASP.NET MVC 2 JQuery POST not displaying the model state errors

I have been using asp.net mvc for a bit (but I'm still a beginer). I want to have the ability to update two views as a result of a jquery postback.
Basically I have a list and a details view. The details view is presented using a jquery popup (using jquery-UI popup). I only want to update the list if the details save is successful (i.e. there are no validation errors on the details view). However, if there are any validation errros in the details view, I want to update the details view so that the user sees the validation errors.
so I thought in my controller, I return a JsonResult instead of a View.
[HttpPost]
public ActionResult SavePersonInfo(Person p) {
if(ModelState.Valid) {
return View("PersonList");
}
return Json({Error = true, View = PartialView("PersonDetails", p)});
}
As you can see if there are no errors I return the person list view, but if there are any validation errors, I have return the details view. The reason that I'm returning a JsonResult is I need to tell my view there is an error so that the view (jquery) knows which section to update (as in whether to update the person list 'div' or the popup dialog 'div').
So, in my view, the jquery is as follows (please assume that there is a form for entering in the person details and "SubmitPersonForm();" function is called upon clicking on the "Save" button):
<script type="text/javascript>
$('#btnSave').click(function (event) {
onBegin();
$.ajax(
{
type: "POST",
url: "/Person/Save",
data: $('form').serialize(),
success: function (result) {
if(result.Error) {
$('#dvDetails').html($(result).View));
}
else {
$('#dvPersonList').html($result);
}
}
});
});
</script>
So the problem that I have now, is that when there is a validation error, I do see the correct, 'div' being updated, but I lose the asp.net mvc validation messages. I do not see any validation errors in red, as if ASP.NET MVC is completely ignored them. However, my ModelState does have those errros, just not displayed in the details view. I do have valication summary and Html.ValidationFor(m => ...) statements put in my details view.
Could someone tell me why I'm not seeing the validation errors? although I'm using a JSonResult, I do use the right property which is a valid view when I render the 'dvDetails'. Am I doing something that I'm not suppose to in asp.net mvc? Btw I'm using asp.net mvc2 RC with Visual Studio 2010 RC.
Thank you.
The Url does not match the Action name ... not sure if you maybe are calling the wrong Method on the controller ... just an idea. :-)
ASP.NET MVC code processes the response to display validation errors stored in the ModelState during a postback. Because you are using an Ajax Post, the postback code is not rebuilding the page and displaying the validation errors. If you want to display validation errors, you have to handle it yourself.
I've done it by passing the ModelState errors as an array in the response. I process my Ajax response to update the validation error placeholder elements in the form with corresponding error messages in the response.
A warning, though: the keys in the ModelState may have their case changed, so an element ID string in the form doesn't exactly match the string that's used for the key. ModelStateDictionary is case-insensitive, but DOM ID's are not.

Resources