General info

Developing on Rapido with Blocks and Components in the most efficient way, requires you to have some background knowledge. This section will briefly explain some of the useful concepts, that will ease your experience with Block and Component development. If you feel like you still lack some ability and know-how, this section will provide you with the tools needed to become a successful Rapido developer.

In this example we will replace the Everything is on sale block you created during example 1 with a Button component instead of the Template parameter and a helper method (Figure 1.3).

Figure 2.1 Block getting replaced with a component

Here’s how:

  • Open the /MasterBlocks/Custom__Blocks.cshml template
  • Open the /components documentation for your solution – www.yoursolution.url/components
  • Define a new block and use a component instead of a template to create a button, e.g.:
C#
Block salesHeader2 = new Block { Id = "SalesHeader2", SortId = 42, Component = new Button { ButtonType = ButtonType.Button, Title = "Everything is on sale - use your money today!", Link = "/Default.aspx?ID=52", CssClass = "btn--full" } }; masterBlocksBlocksPage.Add(MasterBlockId.MasterHeader, salesHeader2);

In this example, I use a Button component with a number of properties; a title, a link to the products page, and a Base css class to make it full width, emulating the look of the previous SalesHeader block. I then add it to the MasterHeader extensibility point.

The result is almost identical to the original header (Figure 2.2) – to make it completely identical, with font size and button height, you could create a custom CSS class in the Ignite CSS project and use that on the component in addition to the Base class.

 

Figure 3.1 The component-based block

If you want to use a component outside of a block you can call the Razor helper methods directly – this can be useful if you want to avoid adding complexity to the Blocks tree:

C#
@RenderButton(new Button { Link=“#”, Title=”My button”})

All components are designed the same way; helper methods all have the Render prefix, all have only one property set on the method, and that property is always an object with the same name as the component.

While there are many simple components available – e.g. Checkbox, TextField, and Number – the Field component allows you to quickly switch between field types using the FieldType property:

C#
Block fieldTypeTest = new Block { Id = "fieldTypeTest", SortId = 43, Component = new Field { FieldType = FieldType.Textarea, Label = "MyLabel", Value = "MyValue" } };

While the Field component is a little more restricted than the specialized components, it is a great alternative when switching between field types in an easy manner, is a priority.

All fields that contain a list of options – Radio buttons, Checkbox list and Select fields – are designed the same way and use the same FieldListOption object, which means that it is easy to switch between list types.

List options can be defined both outside and inside a block, as in the following examples:

C#
// With component and options defined inside block Block checkBoxListExample1 = new Block { Id = "CheckBoxListExample1", SortId = 44, Component = new CheckboxListField { Label="Label for CheckBoxListExample1", Options = new List<FieldListOption> { new FieldListOption { Label="A", Value="A"}, new FieldListOption { Label="B", Value="B"}, new FieldListOption { Label="C", Value="C"} } } }; masterBlocksBlocksPage.Add(MasterBlockId.MasterHeader, checkBoxListExample1); // With component and options defined outside block CheckboxListField myGreatChkList = new CheckboxListField { Id = "myGreatChkListId", Name = "myGreatChkListName", Label = "Label for checkBoxListExample2" }; myGreatChkList.Options.Add(new FieldListOption { Label = "A", Value = "A" }); myGreatChkList.Options.Add(new FieldListOption { Label = "B", Value = "B" }); myGreatChkList.Options.Add(new FieldListOption { Label = "C", Value = "C" }); Block checkBoxListExample2 = new Block { Id = "CheckBoxListExample2", SortId = 44, Component = myGreatChkList }; masterBlocksBlocksPage.Add(MasterBlockId.MasterHeader, checkBoxListExample2);

In addition to using the components delivered by us you can also create your own custom components. Before embarking on this, though, ask yourself whether you’re trying to solve a local problem or a global problem? If the answer is local – which means you will only need this component in one or two places – we advise you to instead use the standard Template property & a helper method way of rendering a block.

Let’s say you’ve been asked to create a Magical3DImageViewer component – this is a two-step process, since all components consist of a definition and a helper:

  • Open Templates/Designs/Rapido/Components/Custom/Custom__Components.cshtml
  • Write a simple definition like this:
C#
@using Dynamicweb.Rapido.Blocks.Components @functions { public class Magical3DImageViewer : ComponentBase { public string Link { get; set; } } } @helper RenderMagical3DImageViewer (Magical3DImageViewer settings) { }

Here are some basic rules to follow when writing a custom component (or overriding an existing component): 

  1. Only one method parameter should be allowed
  2. Create the components consistently – always name the method property settings, etc.)
  3. If you create a property for a Component that is a type, like “Align”, it should not be of the type string but of type Enum. This makes it much easier to use the component.
  4. Consider what should be done to secure that it is easy to shift between similar components. 
  5. Never render empty attributes – see TextField.cshtml “optionalAttributes” to get an example of how this can be avoided. 
  6. Ensure that your component can be used without setting optional properties
  7. Make proper null-checks – it’s better to do this once too often than to never do it
  8. Keep things that relate to the particular component inside the helper. Do not make weird dependencies.
  9. Re-use General components inside other components, whenever it makes sense – like the Image component for all images and the Button component for all buttons.

Please note that the component MUST have a unique name – we recommend a name which will not collide with future standard components, e.g. YOURCOMPANYNAME_Magical3DImageViewer

This section will provide you with knowledge regarding different aspects of Blocks and Components development. Below, you will find different tips and tricks, that improves your skills as a developer and eases the process of finding specific codes and Blocks. Please read the different sections below, to increase your comfortability with development in Rapido.

Instead of being frustrated because you can’t find the code you are looking for, just do a simple search.  

We have put a lot of work into naming things properly in Rapido.

For some, this is the classic approach. It simply requires you to learn the file structure of Rapido. Firstly, you will find everything in the “Files/Templates/Designs/Rapido” folder.

From this folder, the repeated folder design looks like this: Area -> Subarea -> Blocks folder This, for example, translates to: eCom7/CartV2/Step/Blocks. You can always find the “Custom__blocks.cshtml” file in the Blocks folder, and the root Blocks structure are always defined in files in the folder containing the Blocks folder.

On your page you can add “?debug=true” to the URL. One of the debugging benefits while debug is on, is that you can inspect the page and then get a little more help. On the elements tab in the inspector, you can now see comments on where the Blocks start and ends.

If you are missing a Block that should have been on the site, or it is at a different location than you thought, you can always print out the Blocks structure. The easiest way to do this, is to locate the file containing the root Blocks structure.

In the top locate the BlocksPage variable. In Cart.cshtml it is “checkoutPage”. Then, in the bottom of the file, write: checkoutPage.GetBlocksByStructure() Then refresh the page in the browser and look though the structure. This should provide you with the information you need.