Details
-
Type:
Task
-
Status: Open
-
Priority:
Critical
-
Resolution: Unresolved
-
Affects Version/s: 2.2
-
Fix Version/s: Backlog
-
Component/s: Development, Roadmap, User Experience (UX)
-
Security Level: Public (Public: Anyone can view)
-
Labels:
-
Epic Link:
-
Rice Module:KRAD
-
KRAD Feature Area:Document
-
Application Requirement:KS
-
KAI Review Status:Not Required
-
KTI Review Status:Not Required
Description
"The InnerView component allows a page or a component from another view to be rendered with the view that contains the component. This is useful for the following reasons:
1. Content that is reused across many pages can be built in one view and reused. Prevents from having to include the data and controller methods for each view that needs it.
2. Creation of views can be broken into multiple efforts of form/controllers/view. Valuable for team work.Note there is a restriction that the inner view have the same theme as the parent view. That is the same set of CSS and JavaScript files. If the inner view contains additional CSS or JavaScript files they will be ignored, which might cause the view to malfunction."
Attachments
Issue Links
Activity
Note that the openPopup method quoted in a previous comment on this issue has been modified to enforce UTF-8 encoding on dynamically created the popup form.
If the inner view functionality in KRAD will include a standard means for popup forms based on the original KSAP code, it will be important to include the accept-charset attribute on the form.
Added another patch used by the IU Roadmap project to support dynamic page/component refreshes when posting from an inner view rather than the main view on the page.
This page adds a "formName" attribute to the KRAD Request object, and uses that attribute instead of the hard-coded "kualiForm" to identify the form to post on the page. We have also added formName as a attribute to the retrieveComponent() function in krad.actions.js
Hope this patch helps in the effort to arrive at a final solution for this issue!
Updated latest patch to support update-page as well as update-component.
Would like to pull this off the backlog for 2.5 or 2.6. Should be an easy fix given the patches from Mark.
We have been working to update the script side of inner view for the Degree Map project at IU, and have arrived at a solution that works in a more flexible fashion than the original My Plan code. This was developed on our Rice 2.3 version, and we'll be moving it to Rice 2.4 as a KRAD patch in the near future.
The inner view wrapper patch is no longer required, but the request/response patch is. We have not yet tested with update-component or update-page functions, but will cover that scenario as we work through the iGPS upgrade to Rice 2.4 over the next month.
The updated script for Degree Map is below. Note that this is condensed as a first pass - the full contribution will be broken down further, and include a component support on the Java side.
A few other key points regarding this solution:
- Scripts from myplan.widgets.js have been deprecated, and consolidated into a single JS object: DmPopup.
- To create an inner view popup, construct DmPopup, customize params as needed, then call open().
- To close the popup, call close().
- DmPopup is intended to be constructed only from the actionScript defined by a child of Uif-Action
- Multiple inner views may exist at the same time, however...
- In this implementation only one inner view per page ID may exist at a time.
- While opening the second inner view with the same page ID, the first will be closed and removed.
- The one-per-pageId restriction may be lifted through rewriting IDs on the inner view content prior to attaching to the popover (more on that below). This change is planned for the next iGPS revision.
- Multiple inner views per "outer" view is the key element driving this revision: for Degree Map we have one inner view that pulls up a LightTable of courses then another invoked from the rows in the LightTable for pulling up a summary of the course. The summary view is also linked directly from the requirement, depending on whether or not a single course satisfies the requirement or if there is a choice. See attached screenshot.
The script defining DmPopup:
function DmPopup(innerViewId, action, data, e) {
this.wrapperId = innerViewId + "_popup";
this.formId = innerViewId + "_form";
this.action = action;
this.data = jQuery.extend(data, {
pageId : innerViewId + "_page"
});
this.target = (e.currentTarget) ? e.currentTarget : e.srcElement;
// TODO: move jquery-popover to KRAD, or switch to delivered equivalent
this.appUrl = getConfigParam("kradUrl") + '/..';
this.closeImageUrl = this.appUrl + '/ks-myplan/images/btnClose.png';
this.loadingImageUrl = this.appUrl + '/ks-myplan/images/ajaxLoader16.gif';
this.innerViewOptions.themePath = this.appUrl
+ '/ks-myplan/jquery-popover/jquerypopover-theme/';
}
DmPopup.prototype = {
innerViewOptions : {
manageMouseEvents : true,
selectable : true,
tail : {
align : 'middle',
hidden : true
},
position : 'right',
align : 'top',
close : true,
alwaysVisible : false,
themeMargins : {
total : '20px',
difference : '5px'
},
sticky : true,
themeName : 'transparent',
distance : '0px',
openingSpeed : 5,
closingSpeed : 5,
},
open : function() {
var _this = this;
this.close();
var target = jQuery(this.target);
if (!target.HasPopOver())
target.CreatePopOver({
manageMouseEvents : false
});
var loadingImage = jQuery('<img />')
loadingImage.attr('src', this.loadingImageUrl);
loadingImage.attr('alt', 'Loading...');
loadingImage.addClass('arm-dm-popup-loading');
var wrapper = jQuery('<div />');
wrapper.attr('id', this.wrapperId);
wrapper.addClass('arm-dm-popup');
wrapper.append(loadingImage);
this.innerViewOptions.innerHtml = wrapper.wrap('<div>').parent()
.clone().html();
target.ShowPopOver(this.innerViewOptions, false);
var submitData = ksapAdditionalFormData(this.data);
var submitOptions = {
data : submitData,
success : function(response) {
var closeImage = jQuery('<img />');
closeImage.attr('src', _this.closeImageUrl);
closeImage.attr('alt', 'Close');
closeImage.addClass('arm-dm-popup-close');
var innerViewForm = jQuery("#kualiForm", response);
innerViewForm.attr("id", _this.formId);
// TODO: refactor planner, then remove these workarounds
innerViewForm.find(".myplan-view").removeClass("myplan-view");
innerViewForm.find(".ks-Popover").removeClass("ks-Popover");
var innerView = jQuery('<div />');
innerView.addClass('arm-dm-popup-inner');
innerView.append(innerViewForm);
var innerViewWrapper = jQuery('#' + _this.wrapperId);
innerViewWrapper.children('.arm-dm-popup-loading').remove();
innerViewWrapper.append(innerView);
innerViewWrapper.append(closeImage);
jQuery('#' + _this.wrapperId + ' .arm-dm-popup-close').click(
function() {
_this.close();
});
// TODO: make KRAD not jump to the top when loading inner view
var body = jQuery('body');
var bodyWidth = body.width() - 50;
var oScrollTop = body.scrollTop();
var oScrollLeft = body.scrollLeft();
runHiddenScripts(_this.formId);
body.scrollTop(oScrollTop);
body.scrollLeft(oScrollLeft);
var innerViewOuter = jQuery('#' + target.GetPopOverID());
var innerViewWidth = innerViewOuter.width();
var innerViewRight = innerViewOuter.position().left
+ innerViewWidth;
if (innerViewRight > bodyWidth)
innerViewOuter.css('left', (bodyWidth - innerViewWidth)
+ 'px');
_this.innerView = innerView;
},
error : function(jqXHR, textStatus, errorThrown) {
_this.close();
},
statusCode : {
400 : function() {
showGrowl("400 Bad Request", "Fatal Error");
},
500 : function() {
showGrowl("500 Internal Server Error", "Fatal Error");
}
}
};
var aform = jQuery('<form />');
aform.attr('id', 'dm_ajax_form');
aform.attr('action', this.action);
aform.attr('method', 'POST');
aform.ajaxSubmit(submitOptions);
},
close : function() {
var wrapper = jQuery(this.target);
wrapper.HidePopOver();
wrapper.RemovePopOver();
jQuery('#' + this.formId).parents("div.jquerypopover").remove();
this.innerView = null;
}
};
For reference, the action component that creates the inner view is defined below:
<bean parent="Uif-ActionLinkField" p:label="Courses" p:actionLabel="@\{#line.courseLink\}" p:actionScript="sdm_courseLink('@\{#line.refObjectId\}','@\{#line.displayTerm\}',@\{#line.singleCourse\},e)" p:render="@\{#line.courseLink ne null\}" />
And the function that receives the click event to create the inner view popover:
function sdm_courseLink(refid, termId, singleCourse, e) {
var popup;
if (singleCourse)
popup = new DmPopup("planner_course_summary",
getConfigParam("kradUrl")+"/../myplan/planner",
{ methodToCall : "startDialog",
"courseId" : refid,
"termId" : termId
}, e);
else
popup = new DmPopup("sdm_coursegrid", "coursegrid",
{ methodToCall : "startDialog",
"placeholderId" : refid,
"termId" : termId
}, e);
stopEvent(e);
popup.open();
}
For full lifecycle operation, there will be some notable steps that need to be taken beyond the client-only approach we've followed so far.
- The name "KualiForm" is hard-coded throughout KRAD. This may be a non-issue, but will need to be confirmed. While one form per request is perfectly reasonable, care will need to be taken to ensure that the correct form is posted for update-component, update-page, and similar.
- In the current implementation, it is on the application developer to provide unique IDs. In Rice 2.3 IDs are sequential, so collisions are unavoidable - though dynamic IDs are rarely referred to in iGPS so we've been able to avoid side effects so far. Rice 2.4 will address this through a more sophisticated ID generation approach, but there is still potential for collisions. Client-side rewriting will be insufficient, since that may break update-component callbacks. There will need to be a provision in the ID generation algorithm on the server-side to recognize an inner view and ensure that no duplicate IDs conflicting with the outer view are delivered to the page.
- Scripts assuming one view per browser window will need to be cleaned up. We are aware of at least one: the script that jumps to the top of the page on load. More problematic scripts may exist and need to be checked for.
On a side note, it'll be interesting to see if/how next generation UIF components defined by UXI improve the delivery of inner views.
I hope these comments and sample code are useful!
Updated patch file for Rice 2.4.2
Attaching a patch based on Rice 2.3.0-M3 for supporting inner views in KSAP 0.7. The way KSAP implements pop-up dialogs, a "popupForm" element is defined dynamically with an AJAX response then attached to a jquery-popover element. The content of the form is intended to be the full contents of the "kualiForm" <form> element on the dialog view to be rendered within the pop-up, but not the <form> element itself.
As of Rice 2.3.0-M3 (I haven't yet checked later versions), there is no <div> wrapper providing clean and convenient access within the response page to all of the form's inner elements. Therefore, hidden inputs needed in order to point the inner view at a different controller and form from the page containing the popover are lost.
This patch adds an "innerViewWrapperId" property to the PageGroup component, then when this property is set on the currentPage, renders a div with the provided ID directly inside the <form> element facilitating the use of a Uif-FormView child with multiple pages to drive pop-up dialogs on an unassociated page.
For reference, the openPopup() and ksapAjaxSubmitForm() JS functions from KSAP 0.7 are below. These functions were taken directly from UW My Plan 1.5, and have only be modified from the UW version to deal with HTTP errors a little differently. The value passed in the getId parameter of the openPopup() function corresponds to the innerViewWrapperId property on the page component of the inner view.
I hope this helps as a starting point for implementing this feature!
Best wishes,
Mark