I have a sap gateway service which returns a filestream from type /iwbep/cl_mgw_abs_data=>ty_s_media_resource
my question is: how do i open this in sapui5?
so in sapui5 i have a list with listitems. those listitems have to open the filestream(pdf) when clicked on.
I agree with #Krisho
OPTION 1.- open the URL in a separte tab. Something like this.
<Button text="Open PDF" press="onPress"></Button>
onPress: function(oEvent){
sap.m.URLHelper.redirect("https://sapui5.hana.ondemand.com/docs/maintenancestrategy.pdf", true)
}
Here a snippet: https://jsbin.com/xowocipuye/edit?html,output
OPTION 2 - Create a iFrame
Something like this:
createContent : function(oController) {
var html = new sap.ui.core.HTML();
html.setContent("<div id=\"divPdf\"><iframe id='pdfFrame' style=\"height:1000px;\"></iframe>");
return new sap.m.Page({
title : "PDF View",
showNavButton : true,
navButtonPress : oController.fnGoback,
content : [ html ],
footer : new sap.m.Bar({
})
});
}
I picked this last snippet from this old post:
https://blogs.sap.com/2014/02/20/sapui5-pdf-display/
The OData URL giving you the PDF will be looking like this.
/sap/opu/odata/......./$value
You have two options.
Upon selecting the item, open the corresponding URL in a new Tab.
New tab will automatically render the PDF
Create a UI5 view which
contains an iframe (using UI5 html control) and render the above URL
inside the iframe.
Related
I found the script I wanted (I am a beginner with JS) : https://stackoverflow.com/a/25060114/4857932
Link HTML
Open Modal
Modal JavaScript
//triggered when modal is about to be shown
$('#my_modal').on('show.bs.modal', function(e) {
//get data-id attribute of the clicked element
var bookId = $(e.relatedTarget).data('book-id');
//populate the textbox
$(e.currentTarget).find('input[name="bookId"]').val(bookId);
});
But I would like to know how to open to modal without using the link. Only using JS. Is that possible ?
I tried this code but it's not working :$('#myModal').modal('show');
Can you help me ?
Thanks for your help ! :)
First of all you have to say that you are using the Twitter Bootstrap framework.
You have to use the .modal - method on the modal content::
$('#my_modal_content').modal('show');
$('#my_modal_content').on('shown.bs.modal', function() {
//get data-id attribute of the clicked element
var bookId = $(e.relatedTarget).data('book-id');
//populate the textbox
$(e.currentTarget).find('input[name="bookId"]').val(bookId);
})
I have a question and maybe someone could help me find the best solution. I want a user to be able to add items to a drop down list dynamically in a form. I have a form with text boxes and drop down lists and want the user to be able to add items to the drop down list if they don't find it. I would make the drop down lists text boxes but I want to try and keep the names consistent. An example of a form would be have the user enter a name and then have drop down lists for colors and shapes. If the user does not see the color in the drop down I want them to be able to click a link next to the drop down and enter the name or the color. Another link to add shapes to the drop down list.
I'm trying to do this in an MVC Razor environment. I tried using partial views by having the link open a modal box of a partial view to enter the name, but then I have a form within a form and cannot submit the inner form. If I open a small window to enter the name then how do I add it back to the original parent window form without loosing what they already entered in the text box? I know there has to be a good solution out there.
If you want the users new input to be saved for later use, you could use Ajax to submit the new data into the database, and then have the controller return a partial view with your new dropdown.
So your dropdown would be an action Like this:
public PartialViewResult Dropdown()
{
var model = new DropdownModel()
{
Data = yourdata;
}
return PartialView("Dropdown.cshtml", model)
}
And your action to insert new data would look something like this:
public PartialViewResult AddDataToDropdown(string data)
{
var newDropdown = repository.AddData(data);
var model = new DropdownModel()
{
Data = newDropdown;
}
return PartialView("Dropdown.cshtml", model)
}
So bascially, you can resplace the HTML in the div that contains the dropdown with Ajax like this:
$(".someButton").on("click", function () {
var newData = ("$someTextbox").val();
$.ajax({
url: "/YourController/AddDataToDropdown",
type: "GET",
data: { data: newData}
})
.success(function (partialView) {
$(".someDiv").html(partialView);
});
});
This way you save the data and the dropdown is refreshed without refreshing the entire page
I am migrating the AUI popup dialog window from liferay 6.1 to liferay 6.2. I see that there are some specific changes to be made. I had some problems with display of buttons but it is resolved now. But the problem is with the close icon (x) which should be on the top right corner. It disappeared suddenly as soon as I added a save button.
Here is my code:
myPopup = AUI().use('aui-base','liferay-util-window','aui-io-deprecated', 'event', 'event-custom', function(A) {
var buttons =[{
cssClass: 'button_close',
label: 'Save',
render:true,
id: 'myPopupButton',
on: {
click: function() {
myPopupSubmit();
}}
}];
myPopup = Liferay.Util.Window.getWindow(
{
dialog: {
title : a + ' mytitle',
centered : true,
height : 600,
width : 500,
draggable : true,
resizable : true,
modal : true,
toolbars: {
footer:buttons
},
}}).plug(A.Plugin.IO, {
uri : url
}).render();
myPopup.show();
});
}
Please let me know if you have any idea on it..
on myPopupSubmit I have also written code to close the popup as:
top.document.getElementById('closethick').click();
Since there is no closethick button it returns null.
Using the modal dialog example as a comparison, the X close button is removed when using the toolbars property.
Reviewing the source code for the toolbars property (line 309 at time of writing this) indicates that if you use this property directly, you'll need to include your own X close in the header.
An alternative would be to use the addToolbar function (as seen in the example) to include your buttons while preserving the default toolbars.
modal.addToolbar([{
cssClass: 'button_close',
label: 'Save',
render:true,
id: 'myPopupButton',
on: {
click: function() {
myPopupSubmit();
}
}
}]);
I would also consider making the instance of the dialog available to your myPopupSubmit function so that you would have direct access to perform dialog.hide() or calling dialog.hide() after myPopupSubmit versus using the X close approach.
If sticking with the current approach, the id being used will not work, you'll need to use a CSS selector as the YUI based id will change.
I'm new in SAPUI5 and i create a Table like in this Example -> Demo Link . Now i want to create a "link" on the table columns. For Example by clicking on LastName "Ander" the app changes the view to "ander view". How to do that?
you can create a link as shown below
var oLink1 = new sap.ui.commons.Link({
text: "Link to Action",
tooltip: "This is a test tooltip",
press: function() {
//to go to external link use below code
window.location.replace("http://mywebsite.com/nextPage.html");
//to change the view use this
var view = sap.ui.view({id:"idSecondPage", viewName:"project.secondPage", type:sap.ui.core.mvc.ViewType.JS});
view .placeAt("sample1");
});
Now add it in table column in template
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Web Site"}),
template: oLink1
}));
first of all: what did you try until now?
second: in general i am using jQuery for that
e.g.:
$(viewToHide).fadeOut();
$(viewToShow).fadeIn();
//or use any other of the hide/show functions for that
where the two variables are the ids of the specific views, for example #anderView
I've been trying to figure out how to create and display a form inside of a Dialog using Dojo 1.7.
I want my dialog to look something like this:
All the samples I have seen do it using Markup, but none using AMD
When you create a dialog, you can use a widget (e.g. a form) as content. So, for example, you could do:
require([
"dijit/Dialog",
"dijit/form/Form",
"dijit/form/TextBox",
"dijit/form/Button",
"dojo/domReady!"
], function(Dialog, Form, TextBox, Button)
{
var form = new Form();
new TextBox({
placeHolder: "Name"
}).placeAt(form.containerNode);
new Button({
label: "OK"
}).placeAt(form.containerNode);
var dia = new Dialog({
content: form,
title: "Dialog with form",
style: "width: 300px; height: 300px;"
});
form.startup();
dia.show();
});//~require
require() is provided by Dojo. It loads the dependencies (Form, Dialog etc) and then runs the given function which creates the widgets. However, because we include domReady! among the dependencies, Dojo makes sure the DOM is fully loaded and ready first.
Because I have dia.show() in that function too, the dialog will actually be shown as soon as the page is opened. Let's say you wanted to show the dialog when some button on your page is clicked instead:
require([
"dijit/Dialog",
"dijit/form/Form",
"dijit/form/TextBox",
"dijit/form/Button",
"dojo/on", // Added this!
"dojo/domReady!"
], function(Dialog, Form, TextBox, Button, onEvent)
{
// ... as above, we create the dialog and form when the page loads
// but it remains hidden until we call dia.show() ...
form.startup();
// dia.show(); Commented out this!
onEvent(document.getElementById("someButtonOnYourPage"), "click",
function()
{
dia.show();
});
});//~require