EzDevInfo.com

How to get client side portlet-id in liferay?

I'm using AlloyUI in my liferay portlet.

I want to use my <input>'s id in javascript. The problem is that the id of the elements are changed in client side.

For example:
If I set an <input>'s Id to "username" it is changed to _hospital_WAR_hospitalportlet_userName i.e. _hospital_WAR_hospitalportlet_ is appended to the Id, where Hospital is my portlet name.

How can I get client-side Id so that I can use it in jquery?

Remove Alloy UI from Liferay

Liferay CMS comes with Alloy UI to do several javascript functions (draggable, sortable etc.) The thing is we also use several jQuery plugins that use jQuery UI. Alloy UI also loads slow and has big overhead causing the webpage to lag massively, so we'd like to remove it and do thing with jQuery UI.

Liferay loads Alloy UI files by default in the DOM, is there anything we need to remove (declarations etc.) in the server/portlet files?

How to extract structure from AlloyUI form builder?

I have been playing around with AlloyUI form builder but I can't find how to get the data of the form I have been editing. I looked in the doc, the code... am I blind ? :-)

Thanks! Chris

Accordion in Liferay / Collapsable Navigation

in Liferay 6.2, I can see that all of the below options are basically collapsible.

I would like to make a list in my portlet the same. My sample data is

<ul> Header 1
    <li> Sub Header 1</li>
    <li> Sub Header 2</li>
</ul>
<ul> Header 2
    <li> Sub header 1</li>
    <li> Sub header 2</li>
</ul>

Could anyone post an example or how to achieve this?

Alloy UI input label of different style

I have a aui:input in my form with label First Name *. The current font color of the label is black now. What I want is the label First Name in black font and * in red color.

Does anyone know how to achieve this?

<aui:input model="<%= User.class %>"
           name="firstName"
           label="First Name *"
           showRequiredLabel=""
           value="<%=user.getFirstName() %>">
</aui:input>

"A is not defined" inside of block

I'm trying to extend some functionality of an existing Liferay portlet. As part of this, I would like to use Alloy UI to modify the value of a field in the portlet. There's a pre-existing <aui:script> block where I would like to define my custom function. I went ahead and tried using A.one('element'), but I am receiving the error "A is not defined." A.one() is used elsewhere in the same .jsp file, though not in an <aui:script> block, and it functions as expected.

I have tried Googling this problem to no avail. One solution that I tried was to include the "use" statement in the element block, but this made all of the functions in that block undefined when called from the jsp.

What I mean by the "use" statement is this:

<aui:script use="aui-node,aui-base">
    // ... script
</aui:script>

Here's a rough outline of what I'm trying to do:

<aui:script>
    function save(){
        // This is where I'm getting the 'A is not defined' error.
        var titleNode = A.one('input[name=title]');

        if (titleNode) {
            // do stuff with titleNode
            var titleVal = titleNode.val();
            var titleSubstr = titleVal.substring(0, titleSubstr.lastIndexOf('/'));
            titleNode.val(titleSubstr);
        }

        // other save-related code here
    }

    function otherFunction() {
        // some other functionality
    }
</aui:script>

AUI Auto fields as the tags in liferay6.2

I am displaying data using auto-complete successfully, I am separating each data by using ',' delimiter.

Now I have a requirement to implement the auto-complete like Liferay Tags for the fields as shown below:

the below is my code :

<aui:script>
AUI().use('autocomplete-list', 'aui-base', 'aui-io-request', 'autocomplete-filters', 'autocomplete-highlighters',
function (A) {
    A.io.request('<%=getEntities%>',{
        dataType: 'json',
        method: 'GET',
        on: {
            success: function(event, id, obj) {

                try {
                    new A.AutoCompleteList({
                        allowBrowserAutocomplete: 'false',
                        activateFirstItem: 'true',
                        inputNode: '#<portlet:namespace />entitiesNames',
                        resultTextLocator: 'entityName',
                        render: 'true',
                        resultHighlighter: 'phraseMatch',
                        resultFilters:['phraseMatch'],
                        maxResults: 10, 
                        queryDelimiter : ',',
                        source:this.get('responseData'),
                        autoLoad:false,
                    });
                } catch(e) {
                    alert('not working sudheer: ' + e);
                }
            }
        }
    });
});
</aui:script>

Also posted in Liferay forum: https://www.liferay.com/community/forums/-/message_boards/message/47095147

AUI inline dialog in Liferay JSP page

I'm trying to display an inline dialog (that is, aui-inline-dialog, not aui-dialog) in my Liferay 6.1 portal. However I can not get the examples on https://developer.atlassian.com/display/AUI/Inline+Dialog to work.

I tried this:

<a rel='nofollow' href="#" id="inlineDialog"> Inline Dialog </a>
<script type="text/javascript">
AUI().ready('aui-inline-dialog', 'aui-overlay-manager', function(A) {
    A.InlineDialog(A.one("#inlineDialog"), "myDialog", function(content, trigger, showPopup) {showPopup();}, {onHover: true});
});
</script>

but it just says that InlineDialog is not a function.

What am I missing? (Or is there a better way to display tooltips with more than just textual content?)

Positioning a Dropdown Where Button Was Clicked

I have an Alloy UI Dropdown Component I want to render when a user clicks on one of four buttons - this dropdown should be positioned the left of which button was clicked

var toolsDropdown = new Y.Dropdown({
    boundingBox: '#my-div',
    trigger: '.option',
    hideOnClickOutSide: true,
    hideOnEsc: true
 }).render();

I would like this Dropdown menu to render wherever the position of the button clicked is (imagine these buttons are displayed in each row of a table)

<div id="my-div">
    <div id="container-1">
        <button id="options-btn-1" class="option"  type="button">Option one</button>
    </div>
    <div id="container-2">
        <button id="options-btn-2" class="option"  type="button">Option two</button>
    </div>
    <div id="container-3">
        <button id="options-btn-3" class="option"  type="button">Option three</button>
    </div>
    <div id="container-4">
        <button id="options-btn-4" class="option" type="button">Option four</button>
    </div>
</div>

I have a listener setup to listen for each button clicked

Y.all('button.option-btn').on('click', displayDropdown);

However I'm having some trouble getting this to function properly (maybe I don't fully understand how Alloy's Dropdown works) - any ideas?

EDIT: I think I might fair better with YUI's Overlay Widget

Overlay is a positionable and stackable widget, which also provides support for the standard module format layout, with a header, body and footer section.

AUI : Event rendering issue in month view

Liferay's calendar portlet uses AUI scheduler. I got following issue :

I created following two an event on same day which starts on weekend(Sunday) and ends on next day (Monday)(first day of next week)

Event-A : start-time : 12:10 PM, Sunday end-time : 11:59 PM, Monday

Event-B : start-time : 12:00 PM, Sunday end-time : 11:59 PM, Monday

Ideally both the events should span across Sunday and Monday. But on scheduler (month) view it, Event-A only spans across Monday and Event-B spans on Sunday and Monday both, which is correct rendering.

Anyone have any idea on this ??

I have created a sample fiddle which will be helpful to understand this: http://jsfiddle.net/RU5xw/41/

YUI().use(
    'aui-scheduler',

function (Y) {
    var events = [{
        content: 'Event A',
        endDate: new Date(2013, 1, 17, 4),
        reminder: false,
        startDate: new Date(2013, 1, 16, 13)
    }, {
        content: 'Event B',
        endDate: new Date(2013, 1, 17, 4),
        reminder: false,
        startDate: new Date(2013, 1, 16, 12)
    }];

    var agendaView = new Y.SchedulerAgendaView();
    var dayView = new Y.SchedulerDayView();
    var eventRecorder = new Y.SchedulerEventRecorder();
    var monthView = new Y.SchedulerMonthView();
    var weekView = new Y.SchedulerWeekView();

    new Y.Scheduler({
        activeView: monthView,
        boundingBox: '#myScheduler',
        date: new Date(2013, 1, 4),
        eventRecorder: eventRecorder,
        items: events,
        render: true,
        views: [dayView, weekView, monthView, agendaView]
    });
});

Bootstrap modal in Liferay

I use Bootstrap 2.3.2 and Liferay 6.2 bundled with Tomcat. I have some modal windows with complex body structure created in Bootstrap 2.3.2 and I would like to use them in my portal. Here is said that Liferay uses Bootstrap 2.3.2 css, but not Bootstrap 2.3.2 javascript and components like modals, tooltips, tabs, ... are included in AlloyUI.

I included Bootstrap 2.3.2 javascript and tried to use my modal windows, but if I want to show a modal window it doesn't appear. I would like to ask, how can i show native bootstrap modals in Liferay.

AlloyUI - difference between node.attr("id") and node.getAttribute("id")

In AUI, what is the difference between

node.attr("id")

and

node.getAttribute("id")

where node is an object of type Node.

The documentation on getAttribute says "Allows getting attributes on DOM nodes, normalizing in some cases." but I don't understand what normalizing means, and in what case it is applied.

Thanks, Alain

How to add custom nodes and properties to AlloyUI diagram builder

I have been trying to use diagram builder example of AlloyUI.

I need to add some extra custom node types as well as some additional properties for the nodes. I thought about modifying and then building the library but it sounds like an overkill for such a task and also I have had issues with building.

Is there an easy way to do this?

UPDATE

I realized I could directly modify files in build folder to get rid of build process. I tried adding something like:

var Lang = A.Lang,
..
CUSTOM = 'custom',
..

..
A.DiagramNodeCustom = A.Component.create({
  NAME: DIAGRAM_NODE_NAME,

  ATTRS: {
    type: {
      value: CUSTOM
    },
  },

  EXTENDS: A.DiagramNodeTask
});

A.DiagramBuilder.types[CUSTOM] = A.DiagramNodeCustom;

to /build/aui-diagram-builder-impl/aui-diagram-builder-impl.js.

I have my main javascript file structures as such:

var Y = YUI().use(
  'aui-diagram-builder',
  ..
  function(Y) {
    var availableFields = [
      ..
      {
        iconClass: 'aui-diagram-node-task-icon',
        label: 'Custom',
        type: 'custom'
      },
      ..
    ];

    diagram = new Y.DiagramBuilder(
      {
        availableFields: availableFields,
        boundingBox: '#myDiagramContainer',
        srcNode: '#myDiagramBuilder'
      }
    ).render();
    ..
  }
);

and I can know add a custom node to my diagram. I can click on it and change the name and such but unfortunately it is invisible on the diagram. Also I still couldn't find how to add new attributes to nodes. Any ideas?

Adding dynamic elements to aui form in liferay

How can we add dynamic aui form elements in liferay by using script or aui:script ?? If that is not possible, is there any alternate solution.

I have an aui form which has two sections. On clicking of a button, I want to add new sections to the form dynamically through javascript. I tried using document.createElement(), but by using that, we will be able to create only HTML dom elements. I want to create aui elements like aui:input, aui:select, etc

This is how my form is structured:

Assume that I have a button in second section. When I click that, I want to add one more aui:fieldset element to the aui:form as a child.

Alloy UI problems with javascript function

I'm breaking my head trying to call a js function from a button element inside a form, here is my code:

<% 
PortletPreferences prefs = renderRequest.getPreferences(); 
String employee = (String)prefs.getValue("name", "New Employee");  
%>

<portlet:actionURL var="callURL" windowState="<%=LiferayWindowState.EXCLUSIVE.toString() %>" />

<script type="text/javascript"> 
    Liferay.provide(window, 'insertEmployee',
    function () 
        {
            var A = AUI();
            var url = 'http://localhost:8080/c/portal/json_Service';
            A.io.request(url,
                {
                    method:'POST',
                    data:
                    {
                        serviceClassName:   'com.liferay.test.service.TrabajadorServiceUtil',
                        serviceMethodName:  'create',
                        servletContextName: 'TrabajadorPlugin-portlet',
                        serviceParameters:  '[param]',
                    },
                    headers: {'Content-Type':'charset=utf-8'},
                    on:
                    {
                        success: function()
                        {
                            alert("success " + responseData.name);
                        }
                    },
                    form: {id: 'postForm'},
                    xdr: {dataType: 'json'}
                });
        },
        ['aui-io']
    );
</script>

<div>
    <aui:form name="postForm" id="postForm" method="post" onSubmit="insertEmployee();">
        <input type="text" name="param" value="<%=employee %>"/>
        <input type="submit" value="Submit"/>
    </aui:form>
</div>

I'm not using an java class, thus I'm not using the portlet:actionURL either.

My intention is to call "insertEmployee()" when clicking the 'Submit' button, but it's only sending the param inserted by the user inside the text field. I've tried to put the 'onsubmit' also in the submit input, but the same result is given.

If you could help me or guide me to solve issue it would be so great! I'm not finding good information/tuts on the internet and I'm not sure where is the problem or what else I need to know.

Thanks a lot in advance!