Aula 1

Structure Pages with

Reusable Elements
• Criar uma nova aplicação (Student Support)
• Criar um novo módulo
• Criar uma nova tabela
• Bootstrap excel file (https://tiago-
rebelo.outsystemscloud.com/MyfirstAPP/Entry2.aspx)

Atributo Tipo de Dados Mandatório?

Subject Text (100) Sim
Description Text (1000) Sim
ContactName Text (50) Sim
ContactEmail Email Sim
SubmitDate Date (Currdate()) Sim
• Criar uma WebPage (IssueList)
• Colocar um Title (Issue List)
• Colocar anónimo
• Colocar um Titulo na página
• Adicionar ao ecrã uma table record com todos os campos do tabela Issue
• Criar a query que vai alimentar a tabela
• Criar o preparation
• Criar um aggregate ( Com a tabela Issue e ordenado por submit date)
• Selecionar o source da table record da página com o resultado do aggregate
• Alterar o layout da tabela
• Colocar o description por baixo do subject
• Colocar o email por baixo do Nome de contacto
• Remover as duas colunas que ficaram vazias
• Alterar o nome das Colunas
• Para identificar cada issue, vamos colocar no numero do issue com base no id
da tabela
• Adicionar uma expression, antes do subject
• Como o valor do campo description pode conter 1000 caracteres:
• Coloca um IF na descrição

• Coloca a condição:
Length(IssueTable.List.Current.Issue.Description) <
100
• Criar um componente visual reutilizável (WebBlock)
• Criar com nome (Issue)
• Mover os o preparation e a table record, da pagina criada para o webblock
• Adicionar o webblock na página Issue List
Add Logic to Reusable
Page Elements
• Reutilizar elementos com finalidades diferentes
• Alterar o nome da página “Issue List” para “High Priority Issues”
• Adicionar mais duas páginas
• Low Priority Issues
• Unclassified Issues

• Adicionar as páginas ao Menu, pela ordem apresentada na imagem

• Adicionar o Webblock a todas as páginas criadas
• Alterar o entrypoint para a pagina de issues não classificados
• Adicionar uma tabela estática com o nome de Priority com os seguintes
records

• Adicionar à tabela issues, a chave estrangeira da tabela estática

• Adicionar no webblock uma variável de entrada com o nome de PriorityId do
tipo priority identifier
• Alterar o aggregate (webblock) para ter em conta o valor que está na variável
de entrada, priorityid
• Corrigir cada uma das páginas e colocar o valor da prioridade:
Change Reusable Page
Elements
• Criar uma página para edição do Issue (Issue_edit)
• Adicionar o parâmetro de input (IssueId)
• Adicionar o titulo da página
• Novo ou edição
• Adicionar o preparation com a query à tabela issue com o id recebido
• Colocar o title na página
• Colocar a página como anónima
• Adicionar um formulário, com o source do current record do aggregate criado
• Adicionar um botão save e respetiva acção
• Fazer a ação do Save com a ação createorupdate da tabela issue
• Colocar o link no issue para alterar o issue
• Na listagem comum (Webblock) adicionar o link para a página do edit issue e enviar o
respetivo Id
• Alterar o link para que todo o nome faça parte do link
• Publicar, alterar alguns issues com diferentes tipos de issue
• Após a edição de cada issue, a aplicação faz o redirect para a página de issues
sem prioridade
• Alterar a lógica da função save para redirecionar, baseado na prioridade do issue
• Colocar lógica no Switch
• Alterar a página de edit, para cancelar a ação e voltar para a página original
Change Reusable Page
Elements
• Adicionar um novo webblock (Issue Description)
• Adicionar o preparation

• Copiar o conteúdo da célula para o novo webblock

• Compor todos os erros apresentados, de forma a que o source dos elementos
seja agora a nova query
• Adicionar o webblock à listagem dos issues no webblock
• Criar um nova página (Dashboard)
• Colocar o title
• Colocar como anonima
• Adicionar a página ao inicio do menu
• Criar duas querys no preparation
• Uma query com os Issues Low Priority
• Uma query com os Issues High Priority
• Adicionar 2 secções na página dashboard (Containers)
• Low priority e High Priority
• Em cada uma das secções adicionar o titulo (container e label)
• Colocar a classe de css dos containers do titulo como “heading1”
• Adicionar uma lista (list records) para cada uma das secções
• Colocar o source de cada lista e line count = 5
• Adicionar a cada uma das lista, o webblock criado
Design a Page Layout
• Criar duas colunas na página (Homepage)
• Adicionar um container novo no final das duas listas
• Reduzir o tamanho do container a 6 colunas

• Adicionar outro container com o mesmo tamanho

• Mover a estrutura de cada umas das listas para dentro dos dois novos
containers criados
Enhance the Page Style
using CSS
• Colocar o ID do issue a bold
• Adicionar estilos
Desafio
• Criar dois estilos diferentes para alterar a cor de cada um dos textos
do Dashboard, Red e Orange
• Colocar o tamanho da letra a 25px