Add buttons / Text box / Label / Date picker to a panel.

We can add various controllers to M3 user interface using JScripting. Today I’m going to show some simple mechanisms you can use to add a button, label, and editable text box.

Button 

Buttons can be used for various activities such as,
           1. Call actions or related options with additional validations
           2. Call an API and fill some data
           3. Load some data from a text file and load them to a list view
           4. Call SQL (Not recommended)
           5. Automate a form and etc…..

Normally we use a button for a user driven activity and therefore initial triggering point would be the users’ click. Initializing of a button can be done by the following code,

 var NameOfButton = new Button(); 

Once initializing a button, we need to set button properties such as name, span, alignment, controls and finally we need to add that to the current controller.

//Name you want to show in the button
NameOfButton.Content = 'Click Me!;
//tooltip to give a basic understanding on what it does.
NameOfButton.ToolTip = 'Click here to automatically report pallets';
//set horizontal alignment and span of the button on the grid
NameOfButton.HorizontalAlignment = HorizontalAlignment.Left;
Grid.SetColumn(NameOfButton, 60);
Grid.SetColumnSpan(NameOfButton, 98);
//set vertical alignment and span of the button on the grid
NameOfButton.VerticalAlignment = VerticalAlignment.Top;
Grid.SetRow(NameOfButton, 6);
Grid.SetRowSpan(NameOfButton, 23);
//add this button to the current controller. This is one of most important task of the process. If you don’t add that to the current controller you want be able to see this button on your grid. 
controller.RenderEngine.Content.Children.Add(NameOfButton);
//finally adds an event to this button. This will be responsible for handling events for this button.
NameOfButton.add_Click(OnClick_NameOfButton);

Once the button is constructed, we are good to design the click event which does the work for this button. Ok let’s see how we can create “OnClick_NameOfButton” event.

function OnClick_ NameOfButton (sender: Object, e: RoutedEventArgs) {
  debug.WriteLine("clicked");
  var puno = ScriptUtil.FindChild(content, "WWPUNO");
  RetrivePODataForPONum(puno);
} 

This would capture the user click and do the task for the user. Using this method you can call any method so easily.

 Text Box 
In some scripts we need to get some input value from the user. In that case we can use text box. As previous, first you need to initialize the object and then define respective properties as required.

//initialize the object
var EditBoxName = new  TextBox();  
//if you want to set default value, you can set it here               
 EditBoxName.Text='';
//set width, height and font size. Note that we can uses cell width and height from the configuration itself.
 EditBoxName.Width= 10* Configuration.CellWidth;
 EditBoxName.Height= 15;
EditBoxName.FontSize = 12;  
//set vertical/horizontal alignment with span and size.
EditBoxName.HorizontalAlignment=HorizontalAlignment.Left;
Grid.SetColumn(EditBoxName,20);
Grid.SetColumnSpan(EditBoxName,20);
EditBoxName.VerticalAlignment=VerticalAlignment.Top;
Grid.SetRow(EditBoxName,row);
Grid.SetRowSpan(EditBoxName,23);      
//Finally add this to the grid
controller.RenderEngine.Content.Children.Add(EditBoxName);

Once you define a variable for the edit box you can read the editable text for processing using following property.

 EditBoxName.Text 

Label

 You can add non editable text to M3 using labels as follows.

//initialize the vareable
var labelName = new Label();
//set the name
labelName.Content = name;
labelName.Padding = new Thickness(1);
//set label on the grid
Grid.SetColumn(labelName, col);
Grid.SetRow(labelName, row);
Grid.SetColumnSpan(labelName, 12);
//attach to the current controller
controller.RenderEngine.Content.Children.Add(labelName);

Date picker 

You can also use data picker in a jscript by using following simple code.

// initialize the variable
var variable = new DatePicker(); 
//set width/height
variable.Width= 10* Configuration.CellWidth;
variable.Height= 20; 
variable.FontSize = 10;  
//set date picker on the grid
Grid.SetColumn(variable, col);
Grid.SetRow(variable, row);
Grid.SetColumnSpan(variable, 11);
//attach the date picker to the current controller
controller.RenderEngine.Content.Children.Add(variable);