I am new to SAP UI5.
Here my task is to convert javascript code to xml view. Here javascript is like:
var sHtmlText = '<strong>Aliquam erat volutpat.</strong><br>Vivamus vitae felis nec lacus ultricies dapibus condimentum quis felis.';
sHtmlText += 'Some link goes here:<embed data-index=\"0\">';
var oLink2 = new sap.ui.commons.Link("l2", {
text : "Click me",
href : "http://scn.sap.com/welcome",
title : "SAP Community Network",
target : "_blank"
});
var oFTV2 = new sap.ui.commons.FormattedTextView("otv2");
//set the text with placeholders inside
oFTV2.setHtmlText(sHtmlText);
//add the desired control to the FormattedTextView
oFTV2.addControl(oLink2);
var oCallout = new sap.ui.commons.Callout({
content : oFTV2
});
// create a sample form with two fields and assign a callout to each of them
var oLayout = new sap.ui.commons.layout.MatrixLayout({
layoutFixed : false
});
var oTextField, oLabel;
oLayout.createRow(
oLabel = new sap.ui.commons.Label({text:"First name:", labelFor:"firstname1"}),
oTextField = new sap.ui.commons.TextField("firstname1", {required:true, value:"John"})
);
oTextField.setTooltip(oCallout);
// display it
oLayout.placeAt("sample2");
While running the above code i am getting the text field with a label and input hover popup.
Now my task is to convert the above js view to XML View. I am getting confused.
Please suggest me the exact procedure (generalized manner) for converting the above JS view to XML view.
A quick (and dirty) way is to simply run your application, and when in the view you want to convert to XML, open the SAPUI5 Diagnostics screen (Ctrl-Alt-Shift S), show the Control Tree panel, select the topmost UIArea element, click the 'Export' tab on the right and click the 'Export to XML' button :)
First you need to add name space for your sap.ui.Commons xmlns:com="sap.ui.Commons" in your xml view
then write code like this
for more reference please check xml view developer guide
and example here Example
click on Expample in Master side then select on Detail Side and do show code
Related
I have some content elements in a site package which I want to show up in the content element wizard as explained here:
https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/ContentElements/ContentElementsWizard.html
Basically I have done the same as shown in the section "Create a new tab"
Configuration\TsConfig\Page\ContentElement\All.tsconfig is looking like this:
mod.wizards.newContentElement.wizardItems.mci.header = MCI
mod.wizards.newContentElement.wizardItems.mci {
elements {
mci_home_banner {
iconIdentifier = home-banner
title = Home-Banner
description = Banner der Startseite
tt_content_defValues.CType = mci_home_banner
}
mci_home_banner_element {
iconIdentifier = home-banner-element
title = Home Banner Element
description = Element im Starseitenbanner
tt_content_defValues.CType = mci_home_banner_element
}
}
show := addToList(mci_home_banner, mci_home_banner_element)
}
I reduced the code to just 2 elements. They are not shown at all, but are available over the dropdown, so I can switch to one of them after choosing another element.
This didn't work when created in 9.5 and still does not work after switching to version 11.5.10
What am I missing?
#user414873 Did you try to add your custom elements to the "common" tab instead of your new one "mci"?
And did you try to use an existing icon identifier (e.g. "content-image" or an other one - see https://typo3.github.io/TYPO3.Icons/)? Just to make sure that there is no problem with your custom icons that prevents the elements from being displayed.
Does this minimal example work for you:
mod.wizards.newContentElement.wizardItems.common {
elements {
mci_home_banner {
iconIdentifier = content-image
title = Home-Banner
description = Banner der Startseite
tt_content_defValues.CType = mci_home_banner
}
}
show := addToList(mci_home_banner)
}
And I would doubt this:
I guess otherwise the content elements wouldn't be available at all.
I suggest you check it's correctly included by using the "Info" module in your TYPO3 main menu. Then select the page where the content element should be included and switch the dropdown on top of the content area to "View TSconfig fields content". Now you can search for "wizards" and check if your element is included.
I have a requirement where I have add the panel on click on a button.
In the controller function I have written the code like below. I don't get the error in console neither do I get the panel when I click the button.
However when I console.log the panel object I can see the panel is created but not sure why not reflected in the view. suggestions please.
onAddObjectiveClick: function () {
var panel = new Panel({
headerText: "Description",
visible: true,
backgroundDesign: "Solid",
content: new TextArea({
value: "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
growing: true,
width: "100%",
height: "263px"
})
});
}
this.getView().addDependent(panel); // at this place I have tried setExapanded and setExpandible function too but none helped.
You are basically creating an object, assigning to a local variable and not adding it to your view.
You should have any kind of container element with an aggregation to add your Panel.
Depending on the container the aggregation name will be different and thus the method you need to call in order to add the Panel to it.
Example: If you need to add this Panel inside the aggregation content of the sap.m.Page class, you should
1) Have the Page
2) Capture it inside the controller
3) call the addContent()
I would like to create a multiple step modal dialog - like a wizard. A series of screens that follow on from one another.
I'm using the code from NativeScript's site to display a modal (https://docs.nativescript.org/core-concepts/navigation#modal-pages)
var modalPageModule = "./modal-views-demo/login-page";
var context = "some custom context";
var fullscreen = true;
mainPage.showModal(modalPageModule, context, function closeCallback(username, password) {
// Log the user in...
}, fullscreen);
The code works, but I'm unsure how to change the modalPageModule once the modal is displayed.
Possible duplicate
Nativescript: How to use navigation in modals
https://github.com/NativeScript/NativeScript/issues/3753
Sorry for the earlier lengthy post. Here is my concise (!) description.
I bind a collection view to a combobox as a itemsSource and also bind its selectedvalue with a property from my view model. I must keep IsSynchronizedWithCurrentItem="False".
I change the source list ofr the view and then refresh the view. The changed (added, removed, edited) items appear correctly in the item list of the combo. But problem is with the selected item. When I change its property which is also the displaymember path of the combo, the changed property value does not reflect back on the selecton box of the combo. If you open the combo dropdown it appears correctly on the item list but not on the selection box.
Now if I change the combobox tag to Listbox in my XAML (keeping all attributes as it is) then when selected item's displaymember property value is updated, the changes reflect back on the selected item of the list box .
Why this issue?
Just FYI:
My View Model has properties EmployeeCollectionView and SelectedEmployeeId which are bound to combo as ItemsSource and SelectedValue resp. This VM implements the INotifyPropertyChanged interface.
My core employee class (list of which is the source for the EmployeeCollectionView) is simply a Model class without INotifyPropertyChanged.
DisplayMemberPath is "Name" property of employee Model class. I change this by some means and expect the combo selection box to update the value.
I tried refreshing ther SelectedEmployeeId by setting it 0 (where it correctly selects the dummy "-- Select All --" employee entry from itemsSource) and old selected value back. But no use. The old value takes me back to the old label. Items collection has latest entry though.
When I make combobox's IsEditable=True before the view's refresh and after refresh I make IsEditable=False then the things work out correctly!
But this is a patch and is unnecessary.
Thx
Vinit Sankhe
Your points #2 and #3 are why this isn't working. When the ComboBox has an item selected, it displays in the box the Employee.Name property. You state in #2 that Employee does not implement INotifyPropertyChanged and in #3 you are changing Name and expecting it to update in the ComboBox. But the ComboBox has no idea that the property changed so its displayed value will not change.
I've put together a very simple example that will demonstrate. If you comment out the PropertyChanged event you'll notice that clicking the button no longer has an effect on the UI.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
SizeToContent="WidthAndHeight">
<StackPanel>
<ComboBox ItemsSource="{Binding}" DisplayMemberPath="Name" SelectedIndex="0" Width="150" Height="25" />
<Button Content="Change" Width="75" Height="25" Click="button_Click"/>
</StackPanel>
</Window>
And the code behind...
public partial class MainWindow : Window
{
private ObservableCollection<Thing> things;
private Queue<string> words;
public MainWindow()
{
// some dummy data
string text = "Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat sed diam voluptua";
words = new Queue<string>(text.Split(' '));
things = new ObservableCollection<Thing>();
things.Add(new Thing { Name = words.Dequeue() });
things.Add(new Thing { Name = words.Dequeue() });
things.Add(new Thing { Name = words.Dequeue() });
DataContext = things;
InitializeComponent();
}
private void button_Click(object sender, System.Windows.RoutedEventArgs e)
{
things[0].Name = words.Dequeue();
}
}
I am trying open & close accordion panes programatically. Here is the simplified version of my code. Even though I set the first pane's selected to false and and second pane's selected to true, only the first pane opens when it loads on the browser (FF3).
var accordionContainer = new dijit.layout.AccordionContainer().placeAt("test");
var accordPane = new dijit.layout.ContentPane({"title": "test", "content":"hello"});
var accordPane2 = new dijit.layout.ContentPane({"title": "test1", "content":"hello1"});
accordionContainer.addChild(accordPane);
accordionContainer.addChild(accordPane2, 1);
accordPane.startup();
accordPane2.startup();
//accordionContainer.selectChild(accordPane2);
accordionContainer.startup();
accordPane.selected = false;
accordPane2.selected = true;
You can do it like this:
accordionContainer.selectChild( accordPane2 );
Assuming you are using dojo 1.3.
dijit.layout.AccordionContainer is a subclass of dijit.layout.StackContainer, which has selectChild defined.
I set up a demo page where you can see this code in action
If you were calling selectChild before startup, that could cause the error you were seeing since the widget wasn't in a 'complete' state. (Sorry, missed the commneted out code before I posted original answer)