Quick Tips For Beginners to Neptune Dx SAP Edition
oData
the first problem we have been faced with oData is OData variables' names letters need to be uppercase in order oData to read them oData is connected to the ABAP and ABAP gives all the variables as an uppercase so if you type them in a lowercase you can’t use them and turns them as an undefined variables
Item Id’s
Neptune launchpad gives different Id’s to every item like (__jsview_1) so that we couldn’t use the CSS codes that we wrote in our HTML style file then we change them all to classes and we gave style classes to all items we have
Button text styles
by using style classes we could give different styles to every button but in order to reach button text we needed to add one more class to CSS button styles like
Example
.oButton .sapMBtnContent{
font-size:12px;
}
Mobil experience
we used media to make the app mobile compatible
we used media codes because we had to keep app Ui the same as web a view
Example
@media screen and (max-width:750px) {
.oButton {
width: 150px!important;
}
File uploader button styles
That’s another problem we have been faced with. in order to give style to a button, you need to give it a style class and add some CSS to that class but on the file uploader button, it's different because the file uploader is a single item and has only one style class to reach that button. so we added another class to the CSS style
Example
.oVacFileUploader .sapMBtn .sapMBtnInner {
background-color: green;
border-radius: 5px;
color: white;
border: 1px solid white;
color: white; }
Date time picker max value
Date time picker max value date has to be in javascript format so we used this
Example
var today =new Date();
oDatePickerDate.setMaxDate(today);
Select box value reset
every time user clicks the button
we needed to clear the input data and make the item disable
so we used this
Example
if (RadioNo.getSelected()) {
oComboBox.setValue();
oTextArea.setValue();
oComboBox.setEnabled(false);
oTextArea.setEnabled(false);
}
Searchbox and Select Dialog
Get ıd by selected column
in our project user can change his/her user account.
for change the Id first thing first we needed to get selected column Id so we used this
Example
// Single Select Dialog
var selectedItem = oEvent.getParameter(“selectedItem”);
var context = selectedItem.getBindingContext();
var value = context.getProperty(“PERNR”);
triggerAccount(value);
icon size
in order to change icons size, you need to give it size CSS
height or width doesn’t work with icon
Example
.icon{
Size:50px;
}
Trigger init function
Our project basically has 4 different apps and a Dashboard other 4 app pages is for register processes so every time the user registers something dashboard Ui needs to change depending on the register type in order to do that we needed to trigger the init function every time before we show the dashboard
to trigger the function we used attachBeforeDisplay.
Example
sap.n.Shell.attachBeforeDisplay(function(data, init) {
trigger_init(ıd);
});
Set SelectDialog Filter
in order to filter SelectDialog searches we used this code in the live change attribute of SelectDialog
Example
// Set SelectDialog Filter
var binding = oEvent.getParameter(“itemsBinding”);
var value = oEvent.getParameter(“value”);
var filter = new sap.ui.model.Filter(“STEXT”, “Contains”, value);
binding.filter([filter]);
//for open the pop up
SelectDialogpopup.open();
Dashboard ıd changes
For the dashboard before display. The algorithm needs to be different because if the user changes his/her ıd before go to the register page we need to get ıd from the register page not from ABAP because their ıd already changed so the main user ıd becomes unnecessary we use this if before display data is empty id comes from ABAP if is not empty we take ıd from register page
Appcache.Load StartParams : ıd
Example
ıd send function on register page
function back_to_main_page()
{
var oData = modeloPageElibilgty.getData();
AppCache.Load(“ZZ_MAİN_PAGE”, {
startParams: {
number: oData.PERID
}
});
}
id get in init function on main page
sap.ui.getCore().attachInit(function(data, navObj) {
if (data && data.number) {
if (sap.n) {
sap.n.Shell.attachBeforeDisplay(function(data, init) {
trigger_init(data.number);
});
}
} else {
if (sap.n) {
sap.n.Shell.attachBeforeDisplay(function(data, init) {
trigger_init(ababıd);
});
}
}
});
Div for google maps
We looked at examples of Neptune to add google maps to the screen. In the example, div was used as an item, but there was no item called div. For this, we took the div from the SAP app designer to the Neptune system. After that, we did the bindings. The map was displayed.