Skip to main content
Home  › ... Razor

Dynamic DataSources Tutorials

Tutorial HomeDynamic DataSources
The samples can differ based on your Razor base class or if you're running an old version.
Selected: Typed (2sxc 16+) Switch to Dynamic (Razor14 or below)

Use Dynamic DataSources in Visual Query

The following query will simply combine the two DataSources. The first will provide the authors. The second will apply the KeepOdd filters.

⬇️ Result | Source ➡️

Data in the Query (2)

  • Terry (ID: 45475)
  • Ed (ID: 45485)
@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade
@using System.Linq

<h3>Data in the Query (@MyData.List.Count())</h3>
<ul>
  @foreach (var item in AsItems(MyData)) {
    <li>
      <strong>@item.Title</strong> (ID: @item.Id)
    </li>
  }
</ul>

Source Code of Authors.cs

using System.Linq;
using ToSic.Eav.DataSources;

public class Authors : Custom.DataSource.DataSource16
{
  public Authors(MyServices services) : base(services)
  {
    ProvideOut(() => {
      // Get the app data
      var appData = Kit.Data.GetAppSource();

      // Get the Content-Type Filter DataSource
      var contentTypeFilter = Kit.Data.GetSource<EntityTypeFilter>(attach: appData, parameters: new { TypeName = "Persons"});

      // Return all the items after filtering
      return contentTypeFilter.List;
    });
  }
}

Source Code of KeepOdd.cs

using System.Linq;

public class KeepOdd : Custom.DataSource.DataSource16
{
  public KeepOdd(MyServices services) : base(services)
  {
    ProvideOut(() => {
      // Make sure we have an In stream - otherwise return an error
      var inStream = TryGetIn();
      if (inStream == null) return Error.TryGetInFailed();

      // Return only odd items
      return inStream.Where(e => e.EntityId % 2 == 1);
    });
  }
}

View Configuration

This is how this view would be configured for this sample.

  • Query: DynamicDataSourceKeepOdd
Details for Query: DynamicDataSourceKeepOdd

This query will simply get all the odd items using the Custom DataSource.

Use Custom DataSources in Visual Query

Custom DataSources appear under App in Visual Query.

DataSources which have [Configuration] attributes can also support full visual configuration. The system looks for a content type with the same name as the DataSource + Configuration. In this case, it's looking for a Content Type WithConfigConfiguration.

⬇️ Result | Source ➡️

Data in the Query (7)

  • Hello from WithConfig #1 - Favorite Color: burgundy
  • Hello from WithConfig #2 - Favorite Color: burgundy
  • Hello from WithConfig #3 - Favorite Color: burgundy
  • Hello from WithConfig #4 - Favorite Color: burgundy
  • Hello from WithConfig #5 - Favorite Color: burgundy
  • Hello from WithConfig #6 - Favorite Color: burgundy
  • Hello from WithConfig #7 - Favorite Color: burgundy
@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade
@using System.Linq
@using ToSic.Eav.DataSources

<h3>Data in the Query (@MyData.List.Count())</h3>
<ul>
  @foreach (var item in AsItems(MyData)) {
    <li>
      <strong>@item.Get("Title")</strong> - Favorite Color: @item.Get("FavoriteColor")
    </li>
  }
</ul>
@* TODO:: @2dm Query Img  *@

Source Code of WithConfig.cs

using System.Linq;
using ToSic.Eav.DataSource; // This namespace is for the [Configuration] attribute

public class WithConfig : Custom.DataSource.DataSource16
{
  public WithConfig(MyServices services) : base(services, "My.Magic")
  {
    ProvideOut(() => {
      var result = Enumerable.Range(1, AmountOfItems).Select(i => new {
        Title = "Hello from WithConfig #" + i,
        FavoriteColor,
      });
      return result;
    });
  }

  // This attribute [Configuration] creates a configuration "FavoriteColor"
  // In this example [Configuration] already knows about the fallback.
  // * The property getter calls Configuration.GetThis()
  // * GetThis() will automatically use the property name "FavoriteColor" to look up the config
  // * Calling an empty GetThis() will always return a string,
  //   so it's ideal for string-properties where the Fallback was specified before
  [Configuration(Fallback = "magenta")]
  public string FavoriteColor { get { return Configuration.GetThis(); } }

  // This attribute [Configuration] creates configuration "AmountOfItems"
  // * The property getter calls Configuration.GetThis()
  // * GetThis() will automatically use the property name "AmountOfItems" to look up the config
  //   and will use the default value of 1 if it was not specified
  [Configuration]
  public int AmountOfItems { get { return Configuration.GetThis(1); } }
}

View Configuration

This is how this view would be configured for this sample.

  • Query: DynamicDataSourceWithConfig
Details for DynamicDataSourceWithConfig

Use Custom DataSources in Visual Query

Custom DataSources appear under App in Visual Query.

Many aspects such as the Icon, Name etc. have automatic defaults. But you can configure them as you need using the [VisualQuery] attribute.

⬇️ Result | Source ➡️

@inherits Custom.Hybrid.RazorTyped
@using ToSic.Razor.Blade
@using System.Linq
@using ToSic.Eav.DataSources

@* TODO:: @2dm Call the VisualQuery  *@

@* To Customizations the VisualQuery, you can either use the VisualQueryCustomized.cs file. 
Look at the file for more information about VisualQuery. *@

Source Code of VisualQueryCustomized.cs

// This is necessary to use the [VisualQuery] Attribute
using ToSic.Eav.DataSource.VisualQuery;

// Configure some common aspects in Visual Query
// There are more, but they usually don't make sense on a Dynamic DataSource
[VisualQuery(
  // Give it a nice name and UI-Hint in visual query
  NiceName = "Customized DataSource",
  UiHint = "This demonstrates how to customize the visual query integration",
  // Customize the icon - see google material icons for more
  Icon = "opacity",
  // Customize the link on the (?) icon
  HelpLink = "https://2sxc.org",
  // Customize which Content Type to use when configuring this
  ConfigurationType = "WithConfigConfiguration"
)]
public class VisualQueryCustomized : Custom.DataSource.DataSource16
{
  public VisualQueryCustomized(MyServices services) : base(services)
  {
    // Trivial example, as this demo should focus on the VisualQuery
    ProvideOut(() => new {
      Title = "Hello from VisualQueryCustomized",
      TheAnswer = 42,
    });
  }
}

View Configuration

This is how this view would be configured for this sample.

    Use Custom DataSources in Visual Query

    Custom DataSources appear under App in Visual Query.