Arena Development 101 / 102 Courses # A280, A281 IMPORTANT: You must have your development environment set up for this class

Transcription

1 Arena Development 101 / 102 Courses # A280, A281 IMPORTANT: You must have your development environment set up for this class Presented by: Jeff Maddox Director of Platform Integrations, Ministry Brands 2018 Shelby Systems, Inc. Other brand and product names are trademarks or registered trademarks of the respective holders.

2 Arena Development The following topics are presented in this session: Some ASP.NET Basics Key mechanisms for building your own Arena modules Common Web Controls Arena Controls, Context, and helper properties Module Creation

3 What is ASP.NET? Server-Side Technology

4 Client Side Technology This is what you see if you look at the source of a web page. HTML JavaScript CSS Images

5 Server Side Technology This is what ASP.NET does. The server is responsible for creating a file made up of only client-side markup. ASP.NET is responsible for sending files that can be read by clients.

6 Web Server Controls Must be placed within a <form runat= server > tag. Requires the runat= server attribute. Must use a tag prefix. Example: <asp:label ID= MyLabel runat= server ></asp:label>

7 Web Server Controls View Controls Label Literal Edit Controls TextBox DropDownList RadioButton and RadioButtonList

8 Web Server Controls Container Controls Panel PlaceHolder Event Controls Button LinkButton

9 Arena Controls Added for ease of programming Uses ASP.NET controls as the starting point Examples Person Picker Date Picker Grid More info in Arena Developer 201 class

10 What Are Arena Modules? Provide the ability to extend Arena s core functionality.net custom.ascx User Controls Reusable Has to be used to work in Arena

11 Developer Church SDK Source Code Examples Documentation Developer Community Forums Additional help available for developers

12 Prerequisites Visual Studio Community or any code editor Microsoft SQL Server Express with Advanced Services Microsoft Report Viewer 2008/2010 Arena SDK

13 Developer Do s and Don ts Do NOT Modify existing user controls (.ascx files) on the website. Modify existing pages (.aspx) files on the website. Modify existing style sheets. Modify existing images. Modify the schema of existing database tables. Modify existing database stored procedures. Modify existing database views.

14 Developer Do s and Don ts Do Create custom classes, tables, stored procedures, etc. using the naming conventions defined in the next section. This ensures that no naming conflicts arise during an upgrade. Use source code in SDK as a guide for your modules. Utilize the Community to get help from Arena employees as well as other developer churches.

15 Naming Conventions Database Tables cust_<orgid>_<project-modulename>_<classname> Example: cust_cotcmem_library_item Database Stored Procedures Custom stored procedures should use either get save or del as follows: cust_<orgid>_<project- ModuleName>_sp_get_<descriptivename> Example: cust_cotcmem_ library_sp_get_libraryloan

16 Naming Conventions User Controls Custom user controls (modules) should be placed in Arena in the UserControls/Custom/<ORGID>/<Project- ModuleName>/ directory. The namespace of the code behind file should be as follows: ArenaWeb.UserControls.Custom.<ORGID>.<Project- ModuleName> Example: ArenaWeb.UserControls.Custom.Cotcmem.Library

17 PortalControl Inherits from System.Web.UI.UserControl Adds extra helper methods and properties Every Module in Arena must inherit from PortalControl.

18 Module Creation 1. Create custom user controls. 2. Add the new module to Arena. 3. Create new pages. 4. Create module instances on a page. 5. Watch your module in action.

19 Module Creation 1. Create custom user controls. Create a folder called /UserControls/Custom/<ORGID>/<Project- ModuleName>/ in the root of your Arena folder. Create and develop your user controls.

20 Module Creation 2. Add the new module to Arena. Administration --> Modules item Fill out the form ensuring you put the correct path to your user control in the URL field.

21 Module Creation 3. Create new pages. Administration --> Pages Check the Display In Nav setting in order for your Module to appear in the navigation menu.

22 Module Creation 4. Create module instances on a page. Under the Administration menu select the Pages item and then navigate to the page in your page hierarchy. Select the Main Content tab and press the add module icon. Next select the empty New Module item that is created.

23 Module Creation 5. Watch your module in action.

24 Common Web Controls Panel and PlaceHolder Label and Literal TextBox DropDownList Button, LinkButton, and HyperLink

25 Panel and PlaceHolder Panel creates a grouping of controls Places all controls in the Panel in a <div> element Allows for all elements to be hidden or shown at once Arena uses Panels for the View/Edit modes (e.g. Tag Details). Example: <asp:panel ID="panel" runat="server"> <asp:label ID="label" runat="server" Text="Hello Label"></asp:Label> </asp:panel> Result: <div id="panel"> <span id="label">hello Label</span> </div> PlaceHolder does the same as Panel but does not add a wrapping element.

26 Label and Literal Label allows text to be displayed, wrapped with a <span> or a <label> HTML element. Example: <asp:label ID="label" runat="server" Text="Hello World"></asp:Label> Result: <span id="label">hello World</span> Literal allows text to be displayed with no wrapper Example: <asp:literal ID="literal" runat="server" Text="Hello Literal"></asp:Literal> Result: Hello Literal

27 TextBox TextBoxes are used to create places for people to enter information (e.g. First Name, Last Name). By using TextBoxes, the value the user types becomes available on the server for use in.net. Example: <asp:textbox ID="textbox" runat="server" Text="Value"></asp:TextBox> Result: <input type="text" id="textbox" value="value" /> Display:

28 DropDownList DropDownLists are used to create a list of values for a person to select from (e.g. Member Status) By using DropDownLists, the value the user selects becomes available on the server for use in.net Example: <asp:dropdownlist ID="dropdownlist" runat="server"> <asp:listitem Text="Value1" Value="1"></asp:ListItem> <asp:listitem Text="Value2" Value="2"></asp:ListItem> </asp:dropdownlist> Result: <select> </select> <option value="1">value1</option> <option value="2">value2</option>

29 Button and LinkButton Button and LinkButton both allow action to happen on the server when they are clicked. The difference is Button renders as a button and LinkButton renders as a link. LinkButton is just a hyperlink where the reference is a call back to the server rather than a URL. Example: <asp:button ID="button" runat="server" Text="Save" /> <asp:linkbutton ID="linkbutton" runat="server" Text="Cancel"></asp:LinkButton> Result: <input type="button" id="button" value="save" /> <a href=" dopostback();" id="linkbutton">cancel</a> Display:

30 Arena Controls Arena s controls are custom web controls. They were all started with the Common Web Controls we just covered. They allow developers an easier way to render common controls to the user.

31 Arena Controls DataTextBox PhoneTextBox Pickers - PersonPicker - DocumentPicker - LookupPicker - ProfilePicker - PagePicker Data Grid

32 Arena:DateTextBox Allows a user to select a date with a picker This is set up to allow a date picker or allow the user to select a time. Example: <Arena:DateTextBox ID="Date" runat="server"></arena:datetextbox> <Arena:DateTextBox ID="Time" runat="server" Format="Time"></Arena:DateTextBox> Display:

33 Properties Arena:DateTextBox

34 Arena:PhoneTextBox Allows a user to enter a phone number with optional extension Example: <Arena:PhoneTextBox ID="Phone runat="server"></arena:phonetextbox> Display:

35 Properties Arena:PhoneTextBox

36 Arena Controls Pickers PersonPicker: Allows user to search for and select a person. Contribution Entry uses this control. DocumentPicker: Allows users to select a document from their computer to upload to Arena. ProfilePicker: Allows user to select a profile. This is used in person details when adding a person to a profile. PagePicker: Allows user to select a page.

37 Arena Controls Arena: ArenaRadGrid Inherits from Telerik s RadGrid Uses built in features from RadGrid for sorting, grouping, and paging. Recommended for all displays of table data

38 Display: Arena:ArenaRadGrid

39 Arena:ArenaRadGrid Properties EditEnabled If this is false, then the ability to add and edit all rows is automatically removed Can set add image icon Can set the bulk update, combine people, and /SMS page IDs Allows easy grouping

40 Arena:ArenaRadGrid Event Handlers OnNeedDataSource Used by Telerik to cause a data bind ItemCommand Used to capture when events are caused such as Edit, Add and Delete. ItemDataBound Used if custom items should happen before the grid is displayed

41 Build Module Q&A Class Discussion

42 Jeff Maddox Director of Platform Integrations Ministry Brands Jeff is currently Director of Platform Integrations for Shelby Systems. Prior to that he was Shelby s Director of Information Technology where he led the Development and IT departments. During his 12 years at Shelby he worked on or guided every product available to its customers.