2023.1:Grooper Scripting - CSS Utilities: Difference between revisions

From Grooper Wiki
first update including "About" and beginnings of "How To" // via Wikitext Extension for VSCode
finished "Import Project Files and Create Object Library" section // via Wikitext Extension for VSCode
Line 4: Line 4:


== About ==
== About ==
Before we begin, it is highly recommend to review the contents of the '''[[Remote Scripting Setup]]''' article. In this article you will learn how to configure your environment with the '''[[Remote Scripting Setup#Installing and Configuring the Grooper SDK|Grooper SDK]]''' so that you can leverage your web browser as a debug target for '''Grooper''' scripts. You will also see how the '''Grooper SDK''' is used to push the files of your local solution to the target object in '''Grooper''' so that it may be properly compiled within the application.
'''''<span style="color: red";>IMPORTANT</span>'''''


'''Before we begin''', it is highly recommend to review the contents of the '''[[Remote Scripting Setup]]''' article. In this article you will learn how to configure your environment with the '''[[Remote Scripting Setup#Installing and Configuring the Grooper SDK|Grooper SDK]]''' so that you can leverage your web browser as a debug target for '''Grooper''' scripts. You will also see how the '''Grooper SDK''' is used to push the files of your local solution to the target object in '''Grooper''' so that it may be properly compiled within the application.
<hr>
The purpose of this article is to walk you through an example of creating a simple object command that will set [https://en.wikipedia.org/wiki/CSS CSS] styling in the '''''Style Sheet''''' property of "DataFieldContainer" objects. In so doing we will get exposure the powerful '''Object Library''' object and its useful solution template functionality. This solution will then be used in Visual Studio 2019 to write the necessary code to accomplish the desired task. This will reveal namespaces and their members that are commonly used to expand the capabilities of '''Grooper''' via scripting.
The purpose of this article is to walk you through an example of creating a simple object command that will set [https://en.wikipedia.org/wiki/CSS CSS] styling in the '''''Style Sheet''''' property of "DataFieldContainer" objects. In so doing we will get exposure the powerful '''Object Library''' object and its useful solution template functionality. This solution will then be used in Visual Studio 2019 to write the necessary code to accomplish the desired task. This will reveal namespaces and their members that are commonly used to expand the capabilities of '''Grooper''' via scripting.


Line 22: Line 24:
* [https://en.wikipedia.org/wiki/Visual_Studio#2019 Visual Studio 2019] has been installed with the ASP.NET and web development workload
* [https://en.wikipedia.org/wiki/Visual_Studio#2019 Visual Studio 2019] has been installed with the ASP.NET and web development workload
* The '''Grooper SDK''' extension has been added to Visual Studio
* The '''Grooper SDK''' extension has been added to Visual Studio


# Open a compatible web browser (in this case Google Chrome is being used)
# Open a compatible web browser (in this case Google Chrome is being used)
# In the URL box type <code>localhost/Grooper/Design</code>
# In the URL box type: <pre>localhost/Grooper/Design</pre>
# Select the "Projects" folder in the node tree
# Select the "Projects" folder in the node tree
# Click the "Upload" button
# Click the "Upload" button
Line 34: Line 37:




A "completed" version of the work we'll be doing is provided. It contains a compiled version of the solution attached to the '''Object Library''' we will create. If you wanted to use this you could simply refresh the "GrooperAppPool" and the object command would be available. However, for the purposes of this walkthrough it will be removed.
A "completed" version of the work we'll be doing is provided. It contains a compiled version of the solution attached to the '''Object Library''' we will create. If you wanted to use this you could simply refresh the "GrooperAppPool" in IIS and the object command would be available. However, for the purposes of this walkthrough it will be removed.


# <li value=8>Expand the folder of the imported object</li>
# <li value=8>Expand the folder of the imported object</li>
Line 41: Line 44:


[[image: 2023.1_Grooper-Scripting-CSS-Utilities_01_02.png]]
[[image: 2023.1_Grooper-Scripting-CSS-Utilities_01_02.png]]
# <li value=11>Expand the folder provided from the ZIP import</li>
# Right-click the "Object Libraries" folder
# In the pop-out menu select Add > Object Library
# In the "Add" dialog box use the name: <pre>CssUtilities</pre>
# Click the "Execute" button
[[image: 2023.1_Grooper-Scripting-CSS-Utilities_01_03.png]]
# <li value=16>With the '''Object Library''' added we can see it in the node tree</li>
[[image: 2023.1_Grooper-Scripting-CSS-Utilities_01_04.png]]

Revision as of 10:53, 6 June 2024

This article is about an older version of Grooper.

Information may be out of date and UI elements may have changed.

20252023.1

Gain familiarity with the Grooper object model by scripting real world examples and see how commonly used namespaces and their members are leveraged.

About

IMPORTANT

Before we begin, it is highly recommend to review the contents of the Remote Scripting Setup article. In this article you will learn how to configure your environment with the Grooper SDK so that you can leverage your web browser as a debug target for Grooper scripts. You will also see how the Grooper SDK is used to push the files of your local solution to the target object in Grooper so that it may be properly compiled within the application.


The purpose of this article is to walk you through an example of creating a simple object command that will set CSS styling in the Style Sheet property of "DataFieldContainer" objects. In so doing we will get exposure the powerful Object Library object and its useful solution template functionality. This solution will then be used in Visual Studio 2019 to write the necessary code to accomplish the desired task. This will reveal namespaces and their members that are commonly used to expand the capabilities of Grooper via scripting.

The script we create will be fairly simple, but it will give you a foundation upon which you could very easily expand to increase it's capabilities and usefulness. In so doing you can make a powerful and easy to use tool you may end up using in your regular Grooper designing.

How To

In this section we will walk step-by-step through all the necessary actions to create our useful script and begin forming and understanding of how to write .NET scripts for use in Grooper.

Import Project Files and Create Object Library

The system this work will be done on is configured appropriately to debug and push files to Grooper via the Grooper SDK. Given that, the following is true:


  1. Open a compatible web browser (in this case Google Chrome is being used)
  2. In the URL box type:
    localhost/Grooper/Design
  3. Select the "Projects" folder in the node tree
  4. Click the "Upload" button
  5. In the "ZIP File Import" dialog box click the "Choose File" button
  6. Browse to where you downloaded the Grooper ZIP file provided for this article, select the file, and click "Open"
  7. Back in the "ZIP File Import" dialog box click the "Upload" button to complete the upload


A "completed" version of the work we'll be doing is provided. It contains a compiled version of the solution attached to the Object Library we will create. If you wanted to use this you could simply refresh the "GrooperAppPool" in IIS and the object command would be available. However, for the purposes of this walkthrough it will be removed.

  1. Expand the folder of the imported object
  2. Right-click the 'completed' Project and select "Delete"
  3. In the "Delete" dialog box click the "Execute" button


  1. Expand the folder provided from the ZIP import
  2. Right-click the "Object Libraries" folder
  3. In the pop-out menu select Add > Object Library
  4. In the "Add" dialog box use the name:
    CssUtilities
  5. Click the "Execute" button


  1. With the Object Library added we can see it in the node tree