Do czego służy template grida?¶
Mechanizm dodawania template dla gridów działa tylko pod klientem WWW. Przy jego pomocy możemy stworzyć alternatywny wygląd grida, w którym rekord jest prezentowany jako panel. Mechanizm ten także pozwala nam dodać customowy plik css do projektu, w którym możemy nadpisać bieżące style bądź dodać nowe które wykorzystamy w template.
Jak skonfigurować?¶
W neosie należy do grida dodać metodę na template. Jeśli metoda zwróci pusty string to grid zostanie wyświetlony w klasycznym wyglądzie.
Jeżeli w template chcemy korzystać z własnych klas css to w pliku smd należy podać ścieżkę która wskazuje gdzie jest przechowywany customowy plik css dla projektu. Plik ten powinien znajdować się w katalogu projektu. Jeżeli nie skonfigurujemy w pliku smd ścieżki to domyślnie zostanie pobrana ostatnia zdefiniowana ścieżka do projektu. Nie ma możliwości jednocześnie korzystania z wielu plików css projektów. Możemy używać tylko jeden plik na raz.
Przykład użycia¶
W template wykorzystujemy pola dodane do grida, HTML, CSS i opcjonalnie javascript. W metodzie mamy przekazany obiekt HtmlTemplate, w którym znajdują się funkcje generujące gotowe kawałki kodu template. Przy pomocy HTML tworzymy szkielet panelu a CSS wykorzystujemy do pozycjonowania elementów i ustawiania ich wyglądu. Javascript pozwoli nam na tworzenie dynamicznego template
Przykładowa metoda na template:
public string SetGridRowTemplate(HtmlTemplate html)
{
var result = @"
<div style='display:table;margin:10px;width:98%'>
<div style='display:table-row;width:100%'>
<div style='display:table-cell;'>" + html.BinaryImg("TOWPLIKI","PLIK",this.PLIKREF,this.PLIK, "PR69521_GoodImg") + @"
</div>
<div style='display:table-cell;vertical-align:top;width:80%'>
<span>" + html.Link(this.Actions.ShowDetails, html.Val(this.NAZWAT),"PR69521_nameLinkButton") + @"</span>
<span>Kod: </span><span style='font-style:italic'>" + html.Val(this.KTM) + @"</span>
# if("+html.JsName(this.OPISPOD)+@") { #
<br><span>Opis: </span><span> " + html.Val(this.OPISPOD) + @"</span>;
# } #
</div>
<div style='display:table-cell;vertical-align:top;min-width:160px;text-align:right;'>
<span style='color:lime;font-size:18px;'><b>" html.Val(this.CENANET) + @"</b> zł </span>
# if("+html.JsName(this.JEDN)+@") { #
<span> za </span><span>" + html.Val(this.JEDN) + @"</span>
# } #
<br><span>" + html.Val(this.CENABRU) + @" zł z VAT</span>" + html.Button(this.Actions.ToOrder) + @"
</div>
</div>
</div>";
return result;
}
Co pod klientem WWW wygląda następująco:
Aby wyświetlić wartość pola na panelu wystarczy skorzystać z metod html.Val lub html.Text.
html.Val(this.KTM)
html.Text(this.KTM)
Jeśli w polu znajdował się tekst 'RazDwa' to metoda html.Val wyświetli wartość w postaci
Raz
Dwa
Raz<br>Dwa
Jeśli chcemy wyświetlić na panelu własny text tak samo jak robi to metoda html.Text wystarcz w niej zamiast pola podać nasz tekst
html.Text("<b>Moj</b><br><span>przykład</span>")
Aby wyświetlić w panelu ikonkę systemową należy skorzystać z metody html.Icon.
html.Icon("MI_7")
html.Icon(this.Icon)
Jeżeli podamy nazwę jako string to dla każdego panelu w gridzie zostanie wyświetlona ta sama ikona. Jeśli chcemy aby dla każdego panelu wyświetlała się inna ikonka należy w metodzie html.Icon podać pole w którym jest przechowywana nazwa ikonki
Wartość pola można przedstawić przy pomocy checkboxa wykorzystując metodę html.Checkbox
html.Checkbox(this.IsAdmin)
Możemy zmodyfikować domyślną etykietę checkboxa
html.Checkbox(this.IsAdmin, "Administrator")
Domyślny wygląd checkboxa możemy zmienić dodając do niego klasę css
html.Checkbox(this.IsAdmin, null, "myCustomCheckbox")
Aby wyświetlić akcję neosową na panelu w postaci linku bądź przycisku wystarczy użyć odpowiednio metody html.Link i html.Button.
html.Link(this.Actions.ShowDetails)
html.Button(this.Actions.ToOrder)
Jeżeli chcemy aby na przycisku wyświetlał się inny tekst niż nazwa akcji to wystarczy podać nową etykietkę
html.Link(this.Actions.ShowDetails,"Nowa etykieta")
html.Button(this.Actions.ShowDetails,"Nowa etykieta")
Możemy także wartość pola ustawić jako etykietę przycisku
html.Link(this.Actions.ShowDetails, html.Val(this.NAZWAT))
html.Button(this.Actions.ToOrder, html.Val(this.NAZWAT))
Jeżeli chcemy zmienić domyślny wygląd przycisku wystarczy dodać do niego klasę css i wykorzystać ją do ostylowania go.
html.Link(this.Actions.ShowDetails, html.Val(this.NAZWAT),"PR69521_nameLinkButton")
html.Button(this.Actions.ToOrder,null,"PR69521_Button")
Przykładowy css dla podanych klas.
.PR69521_nameLinkButton > button,
.PR69521_Button {
font-size: 18px;
font-weight: bolder;
}
.PR69521_Button > button {
height: 32px!important; /* wysokość przykrywamy z !important aby przesilić styl nadawany standardowo */
}
html.Link(this.Actions.ShowDetails, html.Val(this.NAZWAT), "", "MI_PADLOCK")
html.Button(this.Actions.ToOrder, html.Val(this.NAZWAT), "", "")
Przy czym pusty string w czwartym parametrze oznacza brak ikony, a null pozostawia ikonę domyślną. Jeśli chcemy zmienić ikonę w taki sposób, że jej symbol pochodzi z innego pola, piszemy tak:
html.Link(this.Actions.ShowDetails, html.Val(this.NAZWAT), "", html.Icon(this.ICON,true))
html.Button(this.Actions.ToOrder, html.Val(this.NAZWAT), "", html.Icon(this.ICON,true))
Na panelu możemy wyświetlić obraz z różnych źródeł. Aby wyświetlić obraz z linku url należy skorzystać z metody html.ImgUrl
html.ImgUrl("https://www.google.pl/images/srpr/logo11w.png")
Aby sformatować nasz obraz należy dodać do niego klasę CSS
html.ImgUrl("https://www.google.pl/images/srpr/logo11w.png","PR69521 ImgFromURL")
Aby wyświetlić plik z repozytorium należy skorzystać z metody html.Img
html.Img("CRMDOC","victory.jpg")
html.Img("CRMDOC",this.IMG)
Aby ostylować zdjęcie należy podać klasę css
html.Img("CRMDOC","victory.jpg","MyClass")
html.Img("CRMDOC",this.IMG,"MyClass")
Przykład
Załóżmy, że mamy metodę na template grida, która ma wyświetlać ikony w menu:
public string SetRowTemplateDrop(HtmlTemplate html)
{
return LOGIC.EXAMPLE.GetRowTemplate(html.Val(this.EXAMPLE_ID),
LOGIC.MENU.GetPreviewImageHTML(html.Img("FILES", "photo.jpg")),
html.Val(EXAMPLE_ID_NAME),1);
}
public static void AddIconsToWhiteList()
{
int contractId = API.SessionInfo.GlobalParam["CONTRACT_ID"].AsInteger;
var logicIcon = new LOGIC.ICON();
var icons = logicIcon.Get().Where(x => x.CONTRACT_ID == contractId || x.CONTRACT_ID == 0);
foreach(var icon in icons)
{
GUI.GetRepositoryFileUrl("FILES", icon.PICTURE);
}
}
public void CatalogStructure()
{
EXAMPLE.AddIconsToWhiteList();
Contexts catalogStructure = new Contexts();
catalogStructure.Add("_catalog_id", CATALOG_ID);
catalogStructure.Add("_company_id", COMPANY_ID);
ShowForm("CATALOG_EXAMPLE", "BROWSE", catalogStructure);
}
Aby wyświetlić plik przy wykorzystaniu mechanizmu binary Files należy skorzystać z metody html.BinaryImg
html.BinaryImg("TOWPLIKI","PLIK",this.PLIKREF,this.PLIK)
Tutaj też możemy dodać klasę css aby ostylować nasze zdjęcie
html.BinaryImg("TOWPLIKI","PLIK",this.PLIKREF,this.PLIK, "PR69521_GoodImg")
Przykład
Przykład użycia javascriptu do stworzenia dynamicznego template.
# if("+html.JsName(this.OPISPOD)+@") { #
<br><span>Opis: </span><span> " + html.Val(this.OPISPOD) + @"</span>;
# } #
W tym przykładzie uzależniono widoczności pola na panelu w zależności od jego wartości. Użycie javascriptu jest bardzo proste. Wystarczy napisać kod w tym języku i zamknąć go między znakami #. Aby odwołać się w js do wartości pola należy podać jego javascriptową nazwę. Aby ją uzyskać wystarczy wykorzystać metodę html.JsName dla interesującego nas pola.
Przy pomocy javascriptu także możemy formatować daty:
<span class='ZADANIA_DATE'>
# var dataod = kendo.format('{0:yyyy-MM-dd}', " + html.JsName(this.DATA) + @") #
#= dataod#
</span>
<span class='ZADANIA_DATETIME'>
# var dataod = kendo.format('{0:yyyy-MM-dd HH:mm:ss}', " + html.JsName(this.DATA) + @") #
#= dataod#
</span>
<span class='ZADANIA_TIME'>
# var dataod = kendo.format('{0:HH:mm:ss}', " + html.JsName(this.DATA) + @") #
#= dataod#
</span>
Komunikacja z Neosem¶
W kodzie javascript templatu możemy wywołać dowolną statyczną metodę z projketu neosowego. Aby to zrobić możemy posłużyć się następującym fragmentem kodu:
App.communication.BP.staticMethod('REIVEN.SRC_DASHBOARD', 'UpdateDashboardVMachineID', 'id='+id + ';lat='+lat + ';lon='+lon);
this.DatasetInstance.ID.
Przykład
Przykład przekazania this.DatasetInstance.ID
$(<a id="link" href='javascript:void(0);'>Link</a>).on(\"click\", function(){onMarkerClick("+ this.DatasetInstance.ID + ", " + latitude + ", " + longitude + ")});
function onMarkerClick(id, lat, lon)
{
App.communication.BP.staticMethod('REIVEN.SRC_DASHBOARD', 'UpdateDashboardVMachineID', 'id='+id + ';lat='+lat + ';lon='+lon);
}
Uwaga!
Wszystkie parametry muszą być typu string.
Poniżej przedstawiono przykład jak odwołać się do konkretnego obiektu używając DatasetInstance. ```csharp public static void UpdateDashboardVMachineID(string id) { var di = Neos.BusinessPlatform.Core.ClientInstance.CurrentClientInstance.GetDatasetInstance(int.Parse(id)); var obj = di.CustomObject as SRC_DASHBOARD; ///Dalsze operacje które chcemy wykonać na obiekcie. }