How to detect add or edit mode in HTML5 Lightswitch client? - html

How do you detect if, when using LightSwitch, the detail page is in Add or Edit mode?
I want to change the title of the screen from AddEdit Customer to either 'Add Customer' or 'Edit Customer'.
I can get screen.detail.dispayName = "Something". i need to know how to detect if it is in Add or Edit mode.

This is valid for HTML5 lightswitch -
There is Javascript namespace "msls" which encapsulates the LightSwitch JS framework to obtain the equivalent of EntityState.
The intellisense does not work so well, so if you keep getting screen.(nothing), add the following:
/// <reference path="../GeneratedArtifacts/viewModel.js" />
On the main event, add:
myapp.Customer.created = function (screen) {
if (screen.Customer.details.entityState == msls.EntityState.added) {
screen.details.displayName = "Add Customer";
} else {
screen.details.displayName = "Edit Customer";
}
}
where Customer is the dataset for the AddEdit HTML5 Lightscreen page.

Related

How to fire an event whenever `<my-view#>` is active (i.e. comes into view)?

Using Polymer Starter Kit as an example, I would like to have different <app-toolbar> in <my-app> (using property headerType) based on different <my-view#>, i.e.
<my-view1> => headerType = 'my-view1-header'
<my-view2> => headerType = 'my-view2-header'
In my <my-app>, I have created a property headerType and use <dom-if> to show/hide different <app-toolbar>.
My question is how would I always fire an event to <my-app> and set headerType = my-view#-header whenever <my-view#> is active (i.e. comes into view).
I have tried the polymer lifecycle, such as ready(), attached(), etc, and I understand they are only trigger during dom-related events.
I eventually use the _pageChanged observer to call a function on <my-view#>. Below are the snippet of the code.
_pageChanged: function(page) {
let onLoad = function () {
let selected = this.$.ironpages.children[page];
if (Object.getPrototypeOf(selected).hasOwnProperty('viewSelected')) {
selected.viewSelected();
}
}
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, onLoad, this._showPage404, true);
},
There is some example in Polymer shop template where you can execute something when the visibility of your view change with iron-pages.
you just need to add a property for example visible in each of your view element with Boolean type and observe that property to check whatever the view is visible or not, and then in your iron-pages you need to add selected-attribute property and the value is visible. check Polymer Shop Template.

Call showTab in the screen created event

I am using LightSwitch HTML and I have a screen with multiple tabs, and in the screen 'created' event I want to show one of the tabs based on some logic:
myapp.MyScreen.created = function (screen)
{
if (/* some logic */) {
screen.showTab("TabOne");
} else {
screen.showTab("TabTwo");
}
}
However this throws an error when I open the screen:
TypeError: Cannot read property 'pageName' of undefined.
Has anyone encountered this and found a workaround?
Thanks for the help,
In order to use the showTab API command in the screen's created event, its use needs to be delayed until the screen has fully displayed.
This can be achieved by using a combination of the jQuery mobile pagechange event (as the LightSwitch HTML Client uses jQuery mobile) and a setTimeout with a zero timeout (to delay the showTab until the loading screen is rendered).
The following shows a revised version of your example using this approach:
myapp.MyScreen.created = function (screen) {
$(window).one("pagechange", function (e, data) {
setTimeout(function () {
if (/* some logic */) {
screen.showTab("TabOne");
} else {
screen.showTab("TabTwo");
}
});
});
};
Alongside a more advanced alternative, this approach is covered in more detail in my answer to the following post:
LightSwitch Tabbed screen in Browse template
However, as this approach is based upon delaying the showTab until the initial screen has been fully displayed, it does result in a noticeable transition from the default tab to the one displayed by the showTab method.
Whilst slightly more involved, if you'd prefer to avoid this noticeable transition, it's possible to customise the LightSwitch library to introduce a new option into the standard showScreen method. This new option will allow the desired tab page name to be specified when showing a screen.
If you'd like to introduce this additional option, you'll need to reference the un-minified version of the LightSwitch library by making the following change in your HTML client's default.htm file (to remove the .min from the end of the library script reference):
<!--<script type="text/javascript" src="Scripts/msls-?.?.?.min.js"></script>-->
<script type="text/javascript" src="Scripts/msls-?.?.?.js"></script>
The question marks in the line above will relate to the version of LightSwitch you're using.
You'll then need to locate the section of code in your Scripts/msls-?.?.?.js file that declares the showScreen function and change it as follows:
function showScreen(screenId, parameters, options) {
//return msls_shell.showScreen(
// screenId, parameters, null, false,
// options ? options.beforeShown : null,
// options ? options.afterClosed : null);
return msls_shell.showScreen(
screenId, parameters,
options ? options.pageName : null,
false,
options ? options.beforeShown : null,
options ? options.afterClosed : null);
}
You can then use this new pageName option in any of the standard screen display methods as follows:
msls.application.showScreen("MyScreen", null, { pageName: "TabOne" });
// or
myapp.showScreen("MyScreen", null, { pageName: "TabOne" });
// or
myapp.showMyScreen(null, { pageName: "TabOne" });
This results in the screen being displayed on the desired tab, without a noticeable transition from the default tab.

generating page title with razor script - umbraco

So I am trying to create a script whereby depending on the document type of the page a certain pre-defined title tag format will appear, if there is nothing already written in an overwriting custom title input. I have inserted the macro within the title tag on my master template but keep on getting an Error loading Razor Script message .
Html
<title>
<umbraco:Macro Alias="NewPageTitle" runat="server"></umbraco:Macro>
</title>
Script -
#inherits umbraco.MacroEngines.DynamicNodeContext
#using umbraco.MacroEngines
#{
if(String.IsNullOrEmpty(#Model.tabName.ToString()) == false )
{
#Model.tabName
}
else if(#Model.DescendantsOrSelf("Country"))
{
<text>
Holidays in #Model.Name
</text>
}
else
{
#Model.Name;
}
}
Any help would be greatly appreciated.
Try this code out. The problem with your original code is that you were using "#Model.DescendantsOrSelf("Country")" as a boolean, and it is a list. I also removed your comparison for if(String.IsNullOrEmpty(#Model.tabName.ToString())).
Also, if you add ?umbDebugShowTrace=true to the end of your URL, you can get some valuable debugging information. There is a Chrome Extension called "Umbraco Debug" that I use to quickly access that query string and information. You may find it useful.
#inherits umbraco.MacroEngines.DynamicNodeContext
#using umbraco.MacroEngines
#{
if(String.IsNullOrEmpty(#Model.tabName.ToString()))
{
#Model.tabName
}
else if(#Model.DescendantsOrSelf("Country").Count() > 0)
{
<text>
Holidays in #Model.Name
</text>
}
else
{
#Model.Name;
}
}
its very simple just add following code into your title tag
#Umbraco.Field("pageName")
will display pageName,you may also add custom properties from document type.
e.g. you have added new property like "metaKeywords" with value "html,javascript,xml",fetch that values as following way...
#Umbraco.Field("metaKeywords")
even you don't need to add custom properties in your model

ASP.NET control rendering HTML attributes

I have a custom control in an ASP.NET Web Forms project that inherits from System.Web.UI.Control.
I want to add attributes in the markup that to not correspond to properties of that control e.g.
<myControls:Hyperlink runat=server custom-client-side-attr="1"></<myControls:Hyperlink>
The problem I am having is that the exception
Type 'myControls.Hyperlink' does not have a public property named
'custom-client-side-attr'.
I have tried PersistChildren(false), but that does not fix it. It has been a while since I have been in the depths of ASP.NET Web Forms and cannot remember how this is done.
You have to add those in server-code:
hl1.Attributes["custom-client-side-attr"] = "1";
You can still do it in the markup - you'd have to do it prior to the the declaration:
<% hl1.Attributes["custom-client-side-attr"] = "1"; %>
<myControls:Hyperlink ID="hl1" runat=server custom-client-side-attr="1"></<myControls:Hyperlink>
If you want an attribute like this, you have to create a property in for the user control. You may use viewstate or hidden control to keep the property persistent. Your code may look something like this:
public string custom_client_side_attr
{
get {
if (ViewState["custom_client_side_attr"] != null)
{
return ViewState["custom_client_side_attr"].ToString();
}
return string.Empty;
}
set
{
ViewState["custom_client_side_attr"] = value;
//set custom atribute for the hyperlink here
}
}
And access the property through markup:
<myControls:Hyperlink id="myCustomControl" runat=server custom_client_side_attr="1"></<myControls:Hyperlink>
or in the code:
myCustomControl.custom_client_side_attr="1";
If your custom control derives from WebControl it seems to work as you want.

call code behind functions with html controls

I have a simple function that I want to call in the code behind file name Move
and I was trying to see how this can be done and Im not using asp image button because not trying to use asp server side controls since they tend not to work well with ASP.net MVC..the way it is set up now it will look for a javascript function named Move but I want it to call a function named move in code behind of the same view
<img alt='move' id="Move" src="/Content/img/hPrevious.png" onclick="Move()"/>
protected void Move(){
}
//based on Search criteria update a new table
protected void Search(object sender EventArgs e)
{
for (int i = 0; i < data.Count; i++){
HtmlTableRow row = new HtmlTableRow();
HtmlTableCell CheckCell = new HtmlTableCell();
HtmlTableCell firstCell = new HtmlTableCell();
HtmlTableCell SecondCell = new HtmlTableCell();
CheckBox Check = new CheckBox();
Check.ID = data[i].ID;
CheckCell.Controls.Add(Check);
lbl1.Text = data[i].Date;
lbl2.Text = data[i].Name;
row.Cells.Add(CheckCell);
row.Cells.Add(firstCell);
row.Cells.Add(SecondCell);
Table.Rows.Add(row);
}
}
Scott Guthrie has a very good example on how to do this using routing rules.
This would give you the ability to have the user navigate to a URL in the format /Search/[Query]/[PageNumber] like http://site/Search/Hippopotamus/3 and it would show page 3 of the search results for hippopotamus.
Then in your view just make the next button point to "http://site/Search/Hippopotamus/4", no javascript required.
Of course if you wanted to use javascript you could do something like this:
function Move() {
var href = 'http://blah/Search/Hippopotamus/2';
var slashPos = href.lastIndexOf('/');
var page = parseInt(href.substring(slashPos + 1, href.length));
href = href.substring(0, slashPos + 1);
window.location = href + (++page);
}
But that is much more convoluted than just incrementing the page number parameter in the controller and setting the URL of the next button.
You cannot do postbacks or call anything in a view from JavaScript in an ASP.NET MVC application. Anything you want to call from JavaScript must be an action on a controller. It's hard to say more without having more details about what you're trying to do, but if you want to call some method "Move" in your web application from JavaScript, then "Move" must be an action on a controller.
Based on comments, I'm going to update this answer with a more complete description of how you might implement what I understand as the problem described in the question. However, there's quite a bit of information missing from the question so I'm speculating here. Hopefully, the general idea will get through, even if some of the details do not match TStamper's exact code.
Let's start with a Controller action:
public ActionResult ShowMyPage();
{
return View();
}
Now I know that I want to re-display this page, and do so using an argument passed from a JavaScript function in the page. Since I'll be displaying the same page again, I'll just alter the action to take an argument. String arguments are nullable, so I can continue to do the initial display of the page as I always have, without having to worry about specifying some kind of default value for the argument. Here's the new version:
public ActionResult ShowMyPage(string searchQuery);
{
ViewData["SearchQuery"] = searchQuery;
return View();
}
Now I need to call this page again in JavaScript. So I use the same URL I used to display the page initially, but I append a query string parameter with the table name:
http://example.com/MyControllerName/ShowMyPage?searchQuery=tableName
Finally, in my aspx I can call a code behind function, passing the searchQuery from the view data. Once again, I have strong reservations about using code behind in an MVC application, but this will work.
How to call a code-behind function in aspx:
<% Search(ViewData["searchQuery"]); %>
I've changed the arguments. Since you're not handling an event (with a few exceptions, such as Page_Load, there aren't any in MVC), the Search function doesn't need the signature of an event handler. But I did add the "tablename" argument so that you can pass that from the aspx.
Once more, I'll express my reservations about doing this in code behind. It strikes me that you are trying to use standard ASP.NET techniques inside of the MVC framework, when MVC works differently. I'd strongly suggest going through the MVC tutorials to see examples of more standard ways of doing this sort of thing.